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