vue中常用v-if和v-show来控制元素的显示和隐藏,但是他们是有区别的:
1.页面渲染
v-show 首次进入页面,不管true or false 其下的元素都会渲染,只是若为false 其css的display为none,让其隐藏;切换时只是css变化,DOM元素不会更改
v-if 首次进入页面,若为true,DOM元素才会渲染,否则不渲染;当进行切换时,动态的向DOM树内添加或者删除DOM元素
2.页面开销
若同为false v-show 有更高的首次渲染开销,而 v-if 的首次渲染开销要小的多
但在切换时, v-if 有更高的切换开销,v-show 切换开销小;
3.性能
v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故当元素需要频繁切换时,v-show比较合适,不需要频繁切换建议使用v-if