Vue指令：v-if和v-show的区别

目录

前言 

一、v-if和v-show是什么？

二、v-if和v-show的区别

        1、控制原理不同

        2、编译过程不同

        3、消耗的性能不同

总结：

---

前言 

        说起Vue.js框架的诞生还是在2013年，在Google工作的尤雨溪，受到Angular的启发，从中提取自己所喜欢的部分，开发出了一款轻量框架。如今风靡全球的Vue.js框架中包含了许多的内置指令，今天就Vue的内置指令v-if和v-show重点详解，并将附上一个例子说明。

---

一、v-if和v-show是什么？

         v-show 和v-if 是经常使用的Vue指令，经常用来控制模板和元素的。

---

二、v-if和v-show的区别

        1、控制原理不同

                v-if的控制原理是将整个dom树中的元素销毁或创建从而达到控制渲染的效果；而v-show

        的控制原理则是为需要处理的元素添加display：none进行隐藏，或显示。

        2、编译过程不同

                v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件            适当地被销毁和重建。v-show 就简单得多——不管初始条件是什么，元素总是会被渲                     染，并且只是简单地基于 CSS 进行切换。

        3、消耗的性能不同

                v-if的切换需要操作dom树，因此频繁的使用v-if切换性能消耗很大。而v-show在初始状             态下就已经将数据全部渲染完成，因此在初始状态下v-show的性能消耗比较大。因此需求要           求在一个页面频繁的使用切换隐藏和显示，建议使用v-show；如果只需要单次渲染，很少元           素切换可以使用v-if

---

总结：

        总而言之，在初级前端的领域里，学习vue框架的开发者都必须掌握v-if和v-show的用法，或许在学习路上自己开发的小项目里，v-if和v-show的效果基本相同，但是未来在职场中遇到的一些大项目，v-if和v-show的使用需要谨慎去使用，有可能因为一个指令的用错导致性能