vue的v-if v-else复用元素机制

以前一直以为v-if和v-else渲染的元素就应该是独立的,直到前几天渲染一个自定义的组件,v-if和v-else都引入了,例如


    


    

我以为的是切换type会是2次渲染,组件created()也应该是调用2次,然而,只调用了1次,当时不知道原因

今天再看vue文档时发现:vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染

vue的v-if v-else复用元素机制_第1张图片

也就是说2个模块的内容使用的是相同的元素,则vue是直接复用,而不是从头渲染

如果你不想要复用,则在那个组件上添加key属性就可以了

vue的v-if v-else复用元素机制_第2张图片

https://cn.vuejs.org/v2/guide/conditional.html

你可能感兴趣的:(vue)