v-if和v-show的区别
当条件不成立时,v-if不会渲染DOM元素,v-show操作的是样式(display),切换当前DOM的显示和隐藏。
相同点:
- 都是控制内容的显示和隐藏
不同点:
- v-show:
- 设置css属性中的display为none
- 会编译,只是初始值为false,所以将display设置为none
- 只编译一次,性能好一些
- 适用于频繁切换某节点时,切换性能消耗小,但是初始性能消耗大
- v-if:
- dom树中添加或删除dom元素
- 如果初始值为false时不会编译
- 不停的创建和销毁,性能差一点
- 初始渲染开销小,但是切换开销大
性能
v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。
使用场景
v-if : 不需要频繁切换的场景
v-show : 需要非常频繁切换的场景
- 项目程序比较小: v-if和v-show都可以用来进行判断展示和隐藏(这种场景使用v-if只是影响不大,并不是没有影响);
- 项目程序比较大: 不推荐使用v-if来进行判断展示和隐藏,推荐使用v-show;