v-if和v-show与v-if和v-for之间的优先级问题

v-if和v-show之间的优先级问题

关于这个问题,我们首先需要知道的是v-if和v-show都是如何工作的,只有深入了解了两者的运行原理,才能正确的认识到他们之间的优先级问题。

v-if的工作原理

v-if当且仅当初次渲染和数据发生变化时才起效,Vue会根据表达式的值来判断当前的元素或者组件是否需要渲染。如果为false,也就是不需要渲染,此时Vue会放弃处理这一段代码,将其“丢弃”。也就是说在编译的时候不会将这段代码编译为渲染函数。

v-show的工作原理

v-show与v-if不同,他是通过改变元素的css样式来控制元素的显示隐藏的,也就是通过更改元素的display属性来控制元素的显示隐藏。一旦v-show为false,就会在编译的时候给元素或组件加上display:none这个属性。如此一来,在DOM树和CSSOM树合并为render树的时候,就会忽略掉这块代码,从而实现隐藏。

需要注意的是,在使用v-if的时候,我们可以使用