VUE之v-if与v-show指令的异同

VUE基础 —— v-if 与v-show的异同

使用VUE前端框架的小伙伴学习与实操过程中，肯定不少时候都会用到v-if和v-show两个VUE指令，只从“最终效果”上来看，两者似乎都是达到同样目的：控制元素的显示与隐藏。 但两者也是有区别的。

相同点

如上面说的实现效果一样，v-if和v-show都是实现控制元素显示与隐藏的功能；

不同点

v-show是通过控制元素的CSS属性——display的值（none 或 ‘’）从而达到实现控制元素的显示与隐藏。

v-if则是控制元素在dom树中的添加与删除。

两者的实现方式不同，决定了两者有不同的应用场景：
v-if由于是直接添加、删除dom元素，因此每次切换v-if的值都会导致dom树产生渲染消耗，
所以v-if适用于不需要频繁更改显示状态的情况；

而v-show只是控制元素的display值，因此频繁切换v-show的取值也不会造成多次渲染，浪费资源，
适用于需要频繁切换显示、隐藏状态的应用场景。