v-show和v-if怎么应用
导读:本文共2782.5字符,通常情况下阅读需要9分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一、v-show与v-if的共同点我们都知道在vue中v-show与v-if的作用效果是相同的(不含v-else),都能控制元素在页面是否显示在用法上也是相同的:<Modelv-show="isShow"/><Modelv-if="isShow"/>当表达式为true的时候,都会占据页面的位置当表... ...
目录
(为您整理了一些要点),点击可以直达。我们都知道在vue
中v-show
与v-if
的作用效果是相同的(不含v-else),都能控制元素在页面是否显示
在用法上也是相同的:
当表达式为true
的时候,都会占据页面的位置
当表达式都为false
时,都不会占据页面位置
控制手段不同
编译过程不同
编译条件不同
控制手段:v-show
隐藏则是为该元素添加css--display:none
,dom
元素依旧还在。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
有更高的初始渲染消耗;
具体解析流程这里不展开讲,大致流程如下:
将模板template
转为ast
结构的JS
对象
用ast
得到的JS
对象拼装render
和staticRenderFns
函数
render
和staticRenderFns
函数被调用后生成虚拟VNODE
节点,该节点包含创建DOM
节点所需信息
vm.patch
函数通过虚拟DOM
算法利用VNODE
节点创建真实DOM
节点
不管初始条件是什么,元素总是会被渲染
我们看一下在vue
中是如何实现的
代码很好理解,有transition
就执行transition
,没有就直接设置display
属性
v-if
在实现上比v-show
要复杂的多,因为还有else
else-if
等条件需要处理,这里我们也只摘抄源码中处理v-if
的一小部分
返回一个node
节点,render
函数通过表达式的值来决定是否生成DOM
v-if
与v-show
都能控制dom
元素在页面的显示
v-if
相比v-show
开销更大的(直接操作dom
节点增加与删除)
如果需要非常频繁地切换,则使用 v-show 较好
如果在运行时条件很少改变,则使用 v-if 较好
v-show和v-if怎么应用的详细内容,希望对您有所帮助,信息来源于网络。