v-if 与 v-show 的区别

v-show 本质是控制 标签css样式display

v-if 是动态的向DOM树添加或删除DOM元素

编译区别：

  v-show 实际就是控制 display:none 的快捷方式。

  v-show 只是隐藏了节点的显示，但是节点还在，其绑定的事件也都还在。

  v-if  条件渲染,

    如果满足条件，则整个子节点都会被渲染出来，包括事件的绑定等

    如果不满足条件，则整个子节点都会被删除，包括事件也会被解绑

编译条件区别：

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

  v-if初始值为false，就不会编译了

性能消耗区别：

  v-if 有更高的来回切换消耗

  v-show 有更高的初始渲染消耗

故：

    需要频繁切换状态的场景，使用 v-show

    需要加快初始化时的渲染速度，使用 v-if