• v-if与v-show

    ​🌈个人主页：前端青山
    🔥系列专栏：Vue篇
    🔖人终将被年少不可得之物困其一生

    依旧青山,本期给大家带来vue篇专栏内容:v-if与v-show

    目录

    v-if与v-show区别

    一、v-show与v-if的共同点

    二、v-show与v-if的区别

    三、v-show与v-if原理分析

    v-show原理

    v-if原理

    四、v-show与v-if的使用场景

    v-if和v-for的优先级是什么？

    一、作用

    二、优先级

    示例

    三、注意事项

    v-if与v-show区别

    一、v-show与v-if的共同点

    我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示

    在用法上也是相同的

    1. <Model v-show="isShow" />
    2. <Model v-if="isShow" />

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

    • 当表达式都为false时，都不会占据页面位置

    二、v-show与v-if的区别

    • 控制手段不同

    • 编译过程不同

    • 编译条件不同

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

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

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

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

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

    性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

    三、v-show与v-if原理分析

    具体解析流程这里不展开讲，大致流程如下

    • 将模板template转为ast结构的JS对象

    • 用ast得到的JS对象拼装render和staticRenderFns函数

    • render和staticRenderFns函数被调用后生成虚拟VNODE节点，该节点包含创建DOM节点所需信息

    • vm.patch函数通过虚拟DOM算法利用VNODE节点创建真实DOM节点

    v-show原理

    不管初始条件是什么，元素总是会被渲染

    我们看一下在vue中是如何实现的

    代码很好理解，有transition就执行transition，没有就直接设置display属性

    1.  
    2. export const vShow: ObjectDirective<VShowElement> = {
    3.   beforeMount(el, { value }, { transition }) {
    4.     el._vod = el.style.display === 'none' ? '' : el.style.display
    5.     if (transition && value) {
    6.       transition.beforeEnter(el)
    7.     } else {
    8.       setDisplay(el, value)
    9.     }
    10.   },
    11.   mounted(el, { value }, { transition }) {
    12.     if (transition && value) {
    13.       transition.enter(el)
    14.     }
    15.   },
    16.   updated(el, { value, oldValue }, { transition }) {
    17.     // ...
    18.   },
    19.   beforeUnmount(el, { value }) {
    20.     setDisplay(el, value)
    21.   }
    22. }
    v-if原理

    v-if在实现上比v-show要复杂的多，因为还有else else-if 等条件需要处理，这里我们也只摘抄源码中处理 v-if 的一小部分

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

    1.  
    2. export const transformIf = createStructuralDirectiveTransform(
    3.   /^(if|else|else-if)$/,
    4.   (node, dir, context) => {
    5.     return processIf(node, dir, context, (ifNode, branch, isRoot) => {
    6.       // ...
    7.       return () => {
    8.         if (isRoot) {
    9.           ifNode.codegenNode = createCodegenNodeForBranch(
    10.             branch,
    11.             key,
    12.             context
    13.           ) as IfConditionalExpression
    14.         } else {
    15.           // attach this branch's codegen node to the v-if root.
    16.           const parentCondition = getParentCondition(ifNode.codegenNode!)
    17.           parentCondition.alternate = createCodegenNodeForBranch(
    18.             branch,
    19.             key + ifNode.branches.length - 1,
    20.             context
    21.           )
    22.         }
    23.       }
    24.     })
    25.   }
    26. )

    四、v-show与v-if的使用场景

    v-if 与 v-show 都能控制dom元素在页面的显示

    v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

    如果需要非常频繁地切换，则使用 v-show 较好

    如果在运行时条件很少改变，则使用 v-if 较好

    v-if和v-for的优先级是什么？

    一、作用

    v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

    v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名

    在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

    两者在用法上

    1. <Modal v-if="isShow" />
    2. ​
    4. for="item in items" :key="item.id">
  •   {{ item.label }}

二、优先级

v-if与v-for都是vue模板系统中的指令

在vue模板编译的时候，会将指令系统转化成可执行的render函数

示例

编写一个p标签，同时使用v-if与 v-for

  1. "app">
  2.     <p v-if="isShow" v-for="item in items">
  3.         {{ item.title }}
  4.     p>

创建vue实例，存放isShow与items数据

  1. const app = new Vue({
  2.   el: "#app",
  3.   data() {
  4.     return {
  5.       items: [
  6.         { title: "foo" },
  7.         { title: "baz" }]
  8.     }
  9.   },
  10.   computed: {
  11.     isShow() {
  12.       return this.items && this.items.length > 0
  13.     }
  14.   }
  15. })

模板指令的代码都会生成在render函数中，通过app.$options.render就能得到渲染函数

  1. ƒ anonymous() {
  2.   with (this) { return 
  3.     _c('div', { attrs: { "id": "app" } }, 
  4.     _l((items), function (item) 
  5.     { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
  6. }

_l是vue的列表渲染函数，函数内部都会进行一次if判断

初步得到结论：v-for优先级是比v-if高

再将v-for与v-if置于不同标签

  1. "app">
  2.     <template v-if="isShow">
  3.         <p v-for="item in items">{{item.title}}p>
  4.     template>

再输出下render函数

  1. ƒ anonymous() {
  2.   with(this){return 
  3.     _c('div',{attrs:{"id":"app"}},
  4.     [(isShow)?[_v("\n"),
  5.     _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
  6. }

这时候我们可以看到，v-for与v-if作用在不同标签时候，是先进行判断，再进行列表的渲染

我们再在查看下vue源码

源码位置：\vue-dev\src\compiler\codegen\index.js

  1. export function genElement (el: ASTElement, state: CodegenState): string {
  2.   if (el.parent) {
  3.     el.pre = el.pre || el.parent.pre
  4.   }
  5.   if (el.staticRoot && !el.staticProcessed) {
  6.     return genStatic(el, state)
  7.   } else if (el.once && !el.onceProcessed) {
  8.     return genOnce(el, state)
  9.   } else if (el.for && !el.forProcessed) {
  10.     return genFor(el, state)
  11.   } else if (el.if && !el.ifProcessed) {
  12.     return genIf(el, state)
  13.   } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
  14.     return genChildren(el, state) || 'void 0'
  15.   } else if (el.tag === 'slot') {
  16.     return genSlot(el, state)
  17.   } else {
  18.     // component or element
  19.     ...
  20. }

在进行if判断的时候，v-for是比v-if先进行判断

最终结论：v-for优先级比v-if高

三、注意事项

  1. 永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

  2. 如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环