v-if和v-show的区别

一、功能区别

两个都能实现控制显示和隐藏，但是本质上有巨大的区别：

1. v-if
   v-if 直接操作dom元素的创建或销毁，因为每次显示隐藏都会让组件重新跑一遍生命周期，所以它的显示和隐藏决定了组件的生成和销毁。

2. v-show
   v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，它操作的是display:none/block属性。

二、性能区别

1. v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好。

2. v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期操作的性能。

3. 需要多种条件场景，比如id=1，=2，=3.....时候，因为只有v-if，可以和v-else等连用，这种比较适合用v-if

4. v-show不支持 template 语法

5. v-if切换时候回实时的销毁和重建内部的事件、钩子函数等，v-show只会初始化渲染时候执行，再切换时候不会执行生命后期的过程。