本篇文章对比一下Vue指令v-show 和 v-if,介绍一下v-show 和 v-if 的区别,并聊聊v-show 和 v-if 使用场景,希望对大家有所帮助!
在 vue 中 v-show 和 v-if 都可以控制元素是否在页面中现实。
v-show 的显示隐藏是操作元素css的 display 属性,所以使用 v-show 来隐藏元素的时候,元素的 dom 节点依旧还在页面中;v-if 的显示隐藏则是将 dom 元素整个添加或删除。【相关推荐:vuejs视频教程】
v-if 的切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show 只是简单的操作css的 display 属性。
v-if 是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染。
v-show 由 false 变为 true 的时候不会触发组件的生命周期,v-if 由 false 变为 true的时候,触发组件的 beforeCreate 、 create 、 beforeMount 、 mounted 生命周期钩子,由 true 变为 false 的时候触发组件的 beforeDestory 、destoryed 方法。
在性能消耗方面 v-if 有更高的切换消耗; v-show 有更高的初始渲染消耗。
v-if 与 v-show 都能控制 dom 元素在页面的显示和隐藏
v-if 相比 v-show 开销更大的(直接操作 dom 节点增加与删除),如果需要非常频繁地切换,则使用 v-show 较好,如果在运行时条件很少改变,则使用 v-if 较好
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) } }
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 ) } } }) } )
以上是对比一下Vue指令v-show 和 v-if,聊聊使用场景的详细内容。更多信息请关注PHP中文网其他相关文章!