v-show 与 v-if区别

Posted 2020-09-21 安静的女汉纸

关于条件渲染

所谓条件渲染，就是根据不同的条件，使用不同的模板来生成 html。 在 Vue.js 中，使用 v-if 和 v-show 指令来控制条件渲染。

区别

v-show 会在app初始化的时候编译并且渲染，并且在之后一直存在。当切换v-show模块时，只是简单的更改css。
v-if 当切换v-if模块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 是惰性的，如果为false，则什么也不错-不编译，不渲染。 当第一次条件为真时，才开始编译。

建议

v-show的切换消耗比较低，但是不会重新渲染子组件，所以最好用于静态的内容或者不需要重新构建结构的组件。而 v-if 比较适合不太频繁的切换状态的组件。所以项目设计的时候，不要对复杂的业务设计模块太频繁的视图切换。尽量将静态内容和动态内容分离到不同的模块中。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。