重庆市公司网站备案在哪了,建筑工程电影网,泰安口碑好的企业建站公司,文山专业网站建设哪家好一、v-show与v-if的共同点
我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)#xff0c;都能控制元素在页面是否显示
在用法上也是相同的
Model v-showisShow /
Model v-ifisShow /当表达式为true的时候#… 一、v-show与v-if的共同点
我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)都能控制元素在页面是否显示
在用法上也是相同的
Model v-showisShow /
Model v-ifisShow /当表达式为true的时候都会占据页面的位置当表达式都为false时都不会占据页面位置
二、v-show与v-if的区别
控制手段不同编译过程不同编译条件不同
控制手段v-show隐藏则是为该元素添加css–display:nonedom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除
编译过程v-if切换有一个局部编译/卸载的过程切换过程中合适地销毁和重建内部的事件监听和子组件v-show只是简单的基于css切换
编译条件v-if是真正的条件渲染它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时并不做操作直到为真才渲染
v-show 由false变为true的时候不会触发组件的生命周期v-if由false变为true的时候触发组件的beforeCreate、create、beforeMount、mounted钩子由true变为false的时候触发组件的beforeDestory、destoryed方法
性能消耗v-if有更高的切换消耗v-show有更高的初始渲染消耗
三、v-show与v-if原理分析
具体解析流程这里不展开讲大致流程如下
将模板template转为ast结构的JS对象用ast得到的JS对象拼装render和staticRenderFns函数render和staticRenderFns函数被调用后生成虚拟VNODE节点该节点包含创建DOM节点所需信息vm.patch函数通过虚拟DOM算法利用VNODE节点创建真实DOM节点
v-show原理
不管初始条件是什么元素总是会被渲染
我们看一下在vue中是如何实现的
代码很好理解有transition就执行transition没有就直接设置display属性
// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c46518162/packages/runtime-dom/src/directives/vShow.ts
export const vShow: ObjectDirectiveVShowElement {beforeMount(el, { value }, { transition }) {el._vod el.style.display none ? : el.style.displayif (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-if原理
v-if在实现上比v-show要复杂的多因为还有else else-if 等条件需要处理这里我们也只摘抄源码中处理 v-if 的一小部分
返回一个node节点render函数通过表达式的值来决定是否生成DOM
// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/src/transforms/vIf.ts
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 branchs codegen node to the v-if root.const parentCondition getParentCondition(ifNode.codegenNode!)parentCondition.alternate createCodegenNodeForBranch(branch,key ifNode.branches.length - 1,context)}}})}
)四、v-show与v-if的使用场景
v-if 与 v-show 都能控制dom元素在页面的显示v-if 相比 v-show 开销更大的直接操作dom节点增加与删除如果需要非常频繁地切换则使用 v-show 较好如果在运行时条件很少改变则使用 v-if 较好
