复习笔记（六）v-if与v-show的区别

一、v-show

v-show: 元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
1.写法：v-show=“表达式”（不支持< template >语法）
2.适用于：切换频率较高的场景
3.特点：不展示的DOM元素未被移除，仅仅是使用样式被隐藏掉
4.生命周期：v-show由于只是控制显示隐藏，所以除了初始化渲染，其他时候都不会再走相关生命周期了。

二、v-if

v-if: 满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示
1.写法：
（1）v-if=“表达式”
（2）v-else-if=“表达式”
（3）v-else=“表达式”
（4）v-if支持 < template > 语法
2.适用于：切换频率较低的场景
3.特点：不展示的DOM元素直接被移除
4.注意：v-if可以喝v-else-if、v-else一起使用，但要求结构不能被“打断”
5.使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。
6.生命周期：v-if由于是重新渲染，所以每次切换一次会重新走一次生命周期