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方法;
性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
4.v-if与v-show的使用场景
v-if与v-show都能控制dom元素在页面的显示;v-if相比v-show开销更大(直接操作dom节点增加与删除;- 如果需要非常频繁地切换,则使用 v-show 较好;
- 如果在运行时条件很少改变,则使用 v-if 较好;
补充:当 v-if 与 v-for 一起使用时,v-for 比 v-if 优先级更高,v-if 将分别重复运行于每个 v-for 循环中,所以不推荐同时使用v-if 和 v-for。
文章详细阐述了Vue框架中v-if和v-show指令的原理,v-if通过条件生成或移除DOM,而v-show通过改变display属性控制元素显示。它们在初次渲染、更新和销毁时有不同的处理方式,v-if适合条件不常变的情况,v-show适合频繁切换。同时,v-if不支持v-else语法且在切换时销毁重建组件,v-show则简单基于CSS切换。
726

被折叠的 条评论
为什么被折叠?



