vue.js中v-if渲染的问题

Question

假如一个组件上有这么一段代码：

<div class="box1" v-if="true">
内容1
</div>
<div class="box2" v-else-if="false">
内容2
</div>
<div class="box3" v-else="false">
内容3
</div>

当使用这个组件的时候是所有代码都会被加载还是只会加载判断为真的那一段？

还是说当用户打开网站的时候，整个项目的代码都已经加载了，当有数据去驱动的时候才会渲染？

项目为单页面应用。

Answer 1

v-if不是v-show只有在条件为true的时候才会渲染元素,而v-show因为是单纯的修改display属性的值，也就是说无论是否为真都渲染了元素，因此v-show有渲染开销，而v-if相当于是对元素的删除和添加，因此会有切换开销。