虽然使用 v-if 和 v-show 指令,在页面呈现效果相同,但是两者之间确实存在影响和差异。
- 使用 v-if 隐藏的元素 Vue 不会尝试生成对应的HTML代码;而对于 v-show 指令,则会生成HTML代码,并且让起 display 值为 none,也就是说当需要隐藏尚未加载的内容时,v-if 指令更好一些
- 使用 v-if 会有性能开销,每次插入或者移除元素时都必须要生成元素内部的DOM树,这在某些时候是非常大的工作量。而 v-show 除了在初始创建开销时之外没有额外的开销。如果希望频繁切换某些内容,则选择 v-show。
- 如果元素包含任何图片,那么仅使用CSS隐藏父节点可以使浏览器在图片显示之前就加载它,这意味着一旦 v-show 变为真值,图片就可以显示出来。如果是 v-if 指令,图片会直到要显示时才开始加载
说明:以上内容为读《vue.js快跑:构建触手可及的高性能Web应用》的摘录