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

一、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'
    }
  },