v-if和v-show的区别

v-if和v-show的分析

我们在写vue项目的时候，经常会需要控制"条件渲染",大多数时间我们会使用v-if和v-show来控制，那么二者之间有什么区别吗？

相同点：

都可以动态控制着dom元素的显示隐藏

不同点：

一：
v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;
v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的
二：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗
三：
v-if由于是重新渲染，所以每次切换一次会重新走一次生命周期
v-show由于只是控制显示隐藏，所以除了初始化渲染，其他时候都不会再走相关生命周期了。