v-show和v-if的区别和v-for和v-if的优先级

相同点：v-if和v-show都能控制元素的隐藏和显示

不同点：

实现本质方法不同

• v-show的本质是设置css里面的display，来控制显示和隐藏

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

编译的区别

• v-show其实就是在控制css

• v-if切换有一个局部编译/卸载的过程，切换的过程中合适的销毁和重建内部的事件监听和子组件

编译的条件

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

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

性能比较

• v-show只能编译一次，后边都是控制css；v-if需要不停的销毁重建，故v-show的性能更好

• v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

注意：v-show本质就是控制css中的display，当css本身有display:none时，v-show无法让其显示

优先级

• v-for比v-if高（vue2中）

• v-if比v-for高（vue3中）

注意：不要将v-if和v-for用在同一个标签，会造成性能的浪费（每次都要先循环再进行条件判断），正确的做法应该在v-for外边新加一个标签template，在template中使用v-if也能结合filters或者computed属性对数据进行加工，避免v-if判断，更好的渲染  。