面试知识-vue-1

1.v-if和v-show的区别?

1).v-show和v-if都是用来显示隐藏元素,v-if还有一个v-else配合使用,两者达到的效果都一样。

性能方面去有很大的区别:

2).v-show:不管条件是真还是假,第一次渲染的时候都会编译出来,也就是标签都会添加到DOM中。之后切换的时候,通过display: none;样式来显示隐藏元素。可以说只是改变css的样式,几乎不会影响什么性能。v-if:在首次渲染的时候,如果条件为假,什么也不操作,页面当作没有这些元素。当条件为真的时候,开始局部编译,动态的向DOM元素里面添加元素。当条件从真变为假的时候,开始局部编译,卸载这些元素,也就是删除。

3).性能方面v-if绝对是更消耗性能的,因为v-if在显示隐藏过程中有DOM的添加和删除,v-show就简单多了,只是操作css。

4).因为v-show无论如何都会渲染,如果在一些场景下很难出现,那么使用v-if。如果是一些固定的,条件内容都不怎么会改变的,频繁切换的,使用v-show会比较省性能。如果是子组件,每次切换子组件不执行生命周期,使用v-show,如果子组件需要重新执行生命周期,那么使用v-if才能触发。

猜你喜欢

转载自www.cnblogs.com/xiao-peng-ji/p/11809008.html