vue核心面试题：vue中的v-if和v-show

拼搏现实的明天。 2022-11-26 11:57 158阅读 0赞

# 一、v-if和v-show的区别 #

## 1.理解： ##

（1）v-if 如果条件不成立不会渲染当前指令所在节点的 dom 元素，是不存在dom元素的。

（2）v-show只是对当前 dom 的进行显示或者隐藏 ，相当于display：none或者black。

（3）v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多。

（4）v-if 有更高的切换开销，v-show 切换开销小。

##  2.原理 ##

const VueTemplateCompiler = require('vue-template-compiler');
    // compiler将当前的模板编译成一个我们render方法
    let r1 = VueTemplateCompiler.compile(`<div v-if="true"><span v-for="i in 3">hello</span></div>`);
    // 下面就是r1输出来的
    with(this) {
      return (true) ? _c('div', _l((3), function (i) {
        return _c('span', [_v("hello")])    
      }), 0) : _e() 
    }
    // _e就是创建一个空的虚拟节点

const VueTemplateCompiler = require('vue-template-compiler');
    let r2 = VueTemplateCompiler.compile(`<div v-show="true"></div>`);
    // 下面就是r2编译的信息
    with(this) {    
      return _c('div', {
        directives: [{
           name: "show",
           rawName: "v-show",
           value: (true),
           expression: "true"
        }]
      }) 
    }
    // 编译出一个指令，运行的时候会去处理这个指令，然后匹配到show这个属性
    // 代码在:platforms/web/runtime/directives/show.js文件

v-show 操作的是样式  定义在platforms/web/runtime/directives/show.js

// 一个指令的定义 
     bind (el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
        vnode = locateNode(vnode)
        const transition = vnode.data && vnode.data.transition
        const originalDisplay = el.__vOriginalDisplay =
          el.style.display === 'none' ? '' : el.style.display
        if (value && transition) {
          vnode.data.show = true
          enter(vnode, () => {
            el.style.display = originalDisplay
          })
        } else { // 如果 是false就是none
          el.style.display = value ? originalDisplay : 'none'
        }
      },