v-show和v-if区别

简介: v-show和v-if区别

一. v-show与v-if的共同点

在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else),都能控制元素在页面是否显示 。

当表达式都为 false 时,都不会占据页面位置

当表达式结果为 true 时,都会占据页面的位置

二、v-show与v-if的区别

控制手段不同

编译过程不同

编译条件不同

控制手段: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有更高的初始渲染消耗;

四、v-show与v-if的使用场景

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的(直接操作dom节点增加与删除)

如果需要非常频繁地切换,则使用 v-show 较好

如果在运行时条件很少改变,则使用 v-if 较好



目录
相关文章
|
1天前
|
前端开发 JavaScript
v-if和v-show的区别
v-if和v-show的区别
16 0
|
1天前
|
缓存 JavaScript 前端开发
揭秘`v-if`和`v-show`的区别:选择正确指令的技巧(下)
揭秘`v-if`和`v-show`的区别:选择正确指令的技巧(下)
|
1天前
|
JavaScript 前端开发
揭秘`v-if`和`v-show`的区别:选择正确指令的技巧(上)
揭秘`v-if`和`v-show`的区别:选择正确指令的技巧(上)
|
9月前
|
JavaScript 前端开发
|
9月前
|
JavaScript
v-show和v-for区别
v-show和v-for区别
v-show和v-for区别
|
10月前
|
JavaScript 前端开发
v-if和v-show的区别?
v-if和v-show都是Vue.js框架中的指令,用于根据条件显示或隐藏DOM元素,但它们的实现方式不同,导致在使用时需要注意以下区别:
|
12月前
|
存储 SQL 关系型数据库
Show命令
Show命令
61 0
|
JavaScript 前端开发
v-show的使用
v-show的使用
50 0
|
JavaScript 前端开发
v-if与v-show的使用方法以及区别
v-if与v-show的使用方法以及区别 在vue里面有两种方式来控制元素的显示与隐藏,分别是v-if和v-show,这两种方式都可以控制元素的显示与隐藏,那么如何进行使用呢?