v-show 和 v-if 的区别及使用场景分析

<Model v-show="isShow" />
<Model v-if="isShow" />

// Vue 3 的 v-show 指令实现
export const vShow: ObjectDirective<VShowElement> = {
    // 在元素挂载到 DOM 之前执行
    beforeMount(el, { value }, { transition }) {
      // 保存元素的原始 display 值，用于后续恢复
      // 如果当前是隐藏状态（display: none），则保存空字符串
      // 否则保存当前的 display 值
      el._vod = el.style.display === 'none' ? '' : el.style.display
      // 如果存在过渡动画且值为真（显示元素）
      if (transition && value) {
        // 执行过渡动画的进入前钩子
        transition.beforeEnter(el)
      } else {
        // 否则直接设置元素的显示状态
        setDisplay(el, value)
      }
    },
    // ...其他生命周期处理（如 mounted, beforeUpdate, updated, beforeUnmount 等）
  }

// Vue 3 的 v-if 指令转换器
export const transformIf = createStructuralDirectiveTransform(
    // 匹配 v-if、v-else、v-else-if 指令的正则表达式
    /^(if|else|else-if)$/,
    // 转换函数，处理条件指令的 AST 节点
    (node, dir, context) => {
      // 调用 processIf 函数处理条件分支逻辑
      return processIf(node, dir, context, (ifNode, branch, isRoot) => {
        // 条件分支处理逻辑
        // ifNode: 当前处理的 if 节点
        // branch: 当前分支（if/else-if/else）
        // isRoot: 是否为根节点
      })
    }
  )