一、v-show和v-if的介绍

v-show和v-if作用：根据条件控制元素展示/隐藏

1.1 v-show

用法：根据表达式值的真假，切换元素样式display的值

值类型：any --- 不限制；例如数字0、布尔值的false、空值null、undefined、空字符串""等都表示是假

原理分析：

1. 源码版本：2.7.14；

2. 源码路径：src\platforms\web\runtime\directives\show.ts

   示例：

<template>
    <div>
        <a-button @click="showHandle">点击</a-button>
        <div v-show="isShow">控制元素的展示/隐藏</div>
    </div>
</template>

<script>
export default {
    name: 'componentName',
    data() {
        return {
            isShow: true,
        }
    },
    methods: {
        showHandle() {
            this.isShow = !this.isShow;
        },
    },
}
</script>

1.2 v-if

用法：根据表达式的真值来有条件地渲染元素

值类型：any --- 不限制；假值：数字±0、布尔值的false、空值null、undefined、空字符串""和NaN，排除上述假值之外的皆为真值

原理分析：返回一个node节点，render函数通过表达式的值来决定是否生成DOM

1. 源码版本：2.7.14
2. 源码位置：src\compiler\parser\index.ts

拓展：v-else、v-else-if等条件

示例：

<template>
    <div>
        <a-button @click="showHandle">点击</a-button>
        <div v-if="isShow">控制元素的展示/隐藏</div>
    </div>
</template>

<script>
export default {
    name: 'componentName',
    data() {
        return {
            isShow: true,
        }
    },
    methods: {
        showHandle() {
            this.isShow = !this.isShow;
        },
    },
}
</script>

二、v-show与v-if区别

2.1 v-show与v-if 的相同点

1. 作用效果相同

2. 用法相同

   <div v-show="isShow">控制元素的展示/隐藏</div>
   <div v-if="isShow">控制元素的展示/隐藏</div>
   

3. 当表达式为true的时候，都会占据页面

   

4. 当表达式为false的时候，都不会占据页面

   

2.2 v-show与v-if 的区别

1. 控制手段不同

   • v-show：隐藏则是为该元素添加 css--display:none，dom元素依旧还在

     

   • v-if：显示隐藏是将dom元素整个添加或删除

     

2. 编译过程不同

   • v-show：基于CSS切换
   • v-if：切换有一个局部编译/卸载的过程，切换过程中实时地销毁和重建内部的事件监听和子组件

3. 编译条件不同

   • v-show：

     • 在任何条件(首次条件是否为真)下都会被编译

   • v-if：

     • 惰性的，所以当初始条件为假时什么也不操作，直到为真才渲染；
     • 是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；

4. 触发生命周期不同

   • v-show：

     • 值的切换不会触发组件的生命周期

   • v-if：

     • 值从false切换为true时，触发组件的beforeCreate、create、beforeMount、mounted钩子；true切换为false时，触发组件的beforeDestory、destoryed方法

5. 性能消耗：

   • v-show：有更高的初始渲染消耗；
   • v-if：有更高的切换消耗；

三、使用场景

3.1 v-show

• 需要非常频繁地切换

3.2 v-if

• 运行时条件很少改变

参考

• Vue 指令 v-show
• Vue 指令 v-if
• Vue源码解析：模板编译v-if与codegen(五)
• v-show和v-if有什么区别