Vue内置指令：v-if和v-show的区别

目录

一、概念

二、区别

三、适用场景

---

一、概念

v-if：v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 
v-show：v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

二、区别

1、主要区别

（1）“v-show”只编译一次；而“v-if”不停地销毁和创建

（2）“v-if”更适合于带有权限的操作，渲染时判断权限数据

（3）v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作

2、本质区别

vue-show本质就是标签display设置为none，控制隐藏

vue-if是动态的向DOM树内添加或者删除DOM元素

3、编译区别

v-show其实就是在控制css；v-show都会编译，初始值为false，只是将display设为none，但它也编译了。

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-if初始值为false，就不会编译了。

4、性能

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

5、用法

v-if更适合于带有权限的操作，渲染时判断权限数据，有则展示该功能，没有则删除。v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作。

三、适用场景

从页面显示上看，二者并没有太多的区别，基本上就是显示和不显示的用户体验差别。 在需要频繁切换显示状态的组件或者相对渲染强度大但是过分依赖生命周期或的组件，更加适合用 v-show 作为切换的指令。 因为，v-if 会带来实时渲染所带来的不必要的资源消耗，和操作延迟，这给用户的体验并不是很好，相对下，v-show基于CSS的显示与隐藏，更加快捷，响应速度更快，并且资源消耗也会更小。 但 v-show 的弱点也很明显，因为页面是在页面初始化的时候，就得完成全部的渲染，这使得页面的加载会更消耗资源，也意味着页面加载时长会相应增长。假如组件对资源的消耗，已经影响到了用户的体验，可能采取 v-if 将组件分成小块，按需加载或许会更加有用户体验。

总而言之，v-if 是在表达式返回值切换时，才渲染和摧毁组件及其子组件，他会触发组件的生命周期。而 v-show 是在页面初始化时就进行了完整的渲染，这会在某些情况下，明显增加页面的加载时间。具体的使用，还得根据需求、页面的加载时长以及组件的渲染强度，进行合适的选择。