feat: vShow pauses effect when hidden

Author: Alfred-Skyblue

packages/runtime-dom/src/directives/vShow.ts

@@ -1,4 +1,5 @@
-import { ObjectDirective } from '@vue/runtime-core'
+import { ObjectDirective, type VNode } from '@vue/runtime-core'
+import { ShapeFlags } from '@vue/shared'
 
 export const vShowOldKey = Symbol('_vod')
 
@@ -43,6 +44,16 @@ export const vShow: ObjectDirective<VShowElement> = {
 }
 
 function setDisplay(el: VShowElement, value: unknown): void {
+  // @ts-expect-error
+  const vnode = el.__vnode as VNode
+  if (vnode && vnode.shapeFlag & ShapeFlags.COMPONENT) {
+    const effect = vnode.ctx!.effect
+    if (value) {
+      effect.resume(true)
+    } else {
+      effect.pause()
+    }
+  }
   el.style.display = value ? el[vShowOldKey] : 'none'
 }