深入理解v-if与v-show

无敌大铁锤

已于 2023-03-11 14:35:23 修改

阅读量187

点赞数

文章标签： vue.js 前端

于 2023-03-11 13:40:51 首次发布

本文链接：https://blog.csdn.net/weixin_57959921/article/details/129462020

版权

1.v-if与v-show原理

（1）v-if

根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了v-if也有v-else-if和v-else之类；

返回一个node节点，render函数通过表达式的值来决定是否生成DOM；

export const transformIf = createStructuralDirectiveTransform(
  /^(if|else|else-if)$/,
  (node, dir, context) => {
    return processIf(node, dir, context, (ifNode, branch, isRoot) => {
      // ...
      return () => {
        if (isRoot) {
          ifNode.codegenNode = createCodegenNodeForBranch(
            branch,
            key,
            context
          ) as IfConditionalExpression
        } else {
          // attach this branch's codegen node to the v-if root.
          const parentCondition = getParentCondition(ifNode.codegenNode!)
          parentCondition.alternate = createCodegenNodeForBranch(
            branch,
            key + ifNode.branches.length - 1,
            context
          )
        }
      }
    })
  }
)

（2）v-show

除了v-if之外，Vue还提供v-show也可以控制元素的渲染。v-show和v-if功能有点相似，其中v-if依赖于控制DOM节点，而v-show是依赖于控制DOM节点的display属性。当v-show传入的值为true时，对应DOM元素的display的值为block之类的，反之为false时，display的值为none。也就是用户看不到元素的显示，但其DOM元素还是存在的。

不管初始条件是什么，元素总是会被渲染，有transition就执行transition，没有就直接设置display属性；

export const vShow: ObjectDirective<VShowElement> = {
  beforeMount(el, { value }, { transition }) {
    el._vod = el.style.display === 'none' ? '' : el.style.display
    if (transition && value) {
      transition.beforeEnter(el)
    } else {
      setDisplay(el, value)
    }
  },
  mounted(el, { value }, { transition }) {
    if (transition && value) {
      transition.enter(el)
    }
  },
  updated(el, { value, oldValue }, { transition }) {
    // ...
  },
  beforeUnmount(el, { value }) {
    setDisplay(el, value)
  }
}

注：v-show 不支持<template>语法，也不支持v-else语法；

2.v-if与v-show的共同点

通常情况下，我们在vue中使用v-if与v-show的作用效果是一样的，均有控制元素在页面是否显示的功能。

当表达式为true的时候，都会占据页面的位置；
当表达式都为false时，都不会占据页面位置

3. v-if与v-show的区别

（1）控制手段不同

v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除。

（2）编译过程不同

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换。

（3）编译条件不同

v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。当渲染条件为假时，并不做操作，直到为真才渲染。

补充：

v-show 由false变为true的时候不会触发组件的生命周期；

v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法；