v-if和v-show区别理解

Vue中对元素进行隐藏或显示，有两种常用方法，v-show和v-if，但这两种写法是有以下区别的

1、实现方法本质区别

• vue-show本质就是标签display设置为none，控制隐藏
• vue-if是动态的向DOM树内添加或者删除DOM元素
• v-show 只是简单的css 属性切换，无论条件真与否，都会被编译。相比之下， v-if 更适合
• 条件不经常改变的场景，因为它切换开销相对较大，而v-s how 适用于频繁切换条件。

2、编译的区别

• v-show其实就是在控制css
• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

3、编译的条件

• v-show都会编译，初始值为false，只是将display设为none，但它也编译了
• v-if初始值为false，就不会编译了

4、性能

• v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

注意：v-show 不能在<template>上使用