每日一题——v-if和v-show的理解

一、v-if和v-show相同点

1. 两者都有相同的作用：控制元素在页面中是否显示
2. 用法一致：当表达式为true时显示，为false时隐藏

二、 v-if和v-show不同点

1. 控制手段：v-if是通过删除和添加元素来实现的；v-show是通过css的display来实现的；
2. 编译过程：v-if是切换有局部编译和卸载，切换过程有适当的销毁和重建事件监听和子组件；v-show是基于css的display的属性来切换的
3. 编译条件：v-if是真正的条件渲染，条件为假时，不做任何操作；v-show无论条件的真假，都会给元素进行渲染

三、  v-if和v-show使用场景

1. v-if相比 v-show开销更大的（直接操作dom节点增加与删除）
2. v-if：适合切换频率少的；v-show：适合切换频率高的（tab切换）