一. v-show与v-if的相同点
在 vue 中 v-show 与 v-if 的作用效果是相同，都可以动态控制着dom元素的显示隐藏。
当表达式结果为 true 时，都会占据页面的位置
当表达式都为 false 时，都不会占据页面位置
二、v-show与v-if的区别
初始渲染：v-if初始值为false时，组件不会渲染，生命周期钩子不会执行；
v-if初始值是true时，组件会进行渲染，依次执行：beforeCreate—created—beforeMount—mounted钩子；
v-show无论初始状态是什么，组件都会渲染，依次执行beforeCreate—created—beforeMount—mounted钩子
控制手段：v-show控制显示隐藏则是为该元素添加css–display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换。
v-if切换：false=>true 依次执行：beforeCreate—created—beforeMount—mounted；
true=>false 依次执行：beforeDestroy—destroyed钩子，代码销毁不存在页面中，没有生成代码。
v-show切换 true=>false，为该元素添加css–display:none;所在的标签还是生成了代码，只是没有进行显示而已
编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染
性能消耗：v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
三、v-show与v-if的使用场景
v-if 与 v-show 都能控制dom元素在页面的显示
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
此外，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，所以不推荐同时使用v-if 和 v-for。
编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/126789.html
