v-if/v-show

Fri, 04 Oct 2024 00:00:00 +0800

v-show原理

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)
 }
}

有transition就执行transition，没有transition就直接设置display。不管初始条件是什么，元素总是会被渲染。

v-if原理

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
 )
 }
 }
 })
 }
)

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

V-if/V-Show on Last Stand

v-if/v-show

v-show原理

v-if原理