【刨根问底】v-if 和 v-show 到底触发了哪些生命周期钩子?

引起好奇的原因:

在学习vue2的过程中,发现好几个博文对这个生命周期触发的说的都很矛盾,并且没有看到具体的,打开官网一看也没有看到有关对这两个生命周期函数的具体说明,只是区分了v-if是对DOM元素的修改,频繁切换不适合使用,v-show则是对css的改变,频繁切换比较适合。但是初始渲染时v-show会加载,而v-if如果为false则只会在变为true的时候加载。不过这也解释了为什么子组件中会调用createmount系列的四个钩子。

对比普通变量

vue2中,不论是v-if还是v-show包裹普通变量或者文本都只会触发父组件的beforeUpdateupdated生命周期钩子函数。

vue3中也是一样。

对比组件的更新

与普通的变量大有不同,首先vue3的生命周期钩子函数不是beforeDestroy和destroyed,而是变成了beforeUnmount和unmounted。然后具体差别往下看:

先说结论

vue2中,v-if包裹子组件

  1. 从false转为true:父beforeUpdate、子beforeCreatecreatedbeforeMountmounted、父updated
  2. 从true转为false:父beforeUpdate、子beforeDestroyeddestroyed、父updated

vue3中,v-if包裹子组件

  1. 从false转为true:父beforeUpdate、子beforeCreatecreatedbeforeMountmounted、父updated。(与vue2相同)
  2. 从true转为false:父beforeUpdate、子beforeUnmountunmounted、父updated。(vue2和vue3是生命周期钩子函数的不同)

vue2中,v-show包裹子组件

  1. 从false转为true:父beforeUpdate、父updated
  2. 从true转为false:父beforeUpdate、父updated

vue3中,v-show包裹子组件

  1. 从false转为true:父beforeUpdate、子beforeUpdateupdated、父updated。触发子组件updated
  2. 从true转为false:父beforeUpdate、子beforeUpdateupdated、父updated。触发子组件updated

vue2测试代码

javascript 复制代码
// vue2的测试代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
        <Comp v-if="awesome"></Comp>
        <Comp1 v-show="awesome2"></Comp1>
        <button @click="change">click here!</button>
    </div>
    <script>
        Vue.component('comp1', {
            template: '<div id="app"><p>Comp1</p></div>',
            data() {
                return {
                }
            },
            beforeCreate() {
                console.log("Comp1:", "beforeCreate");
            },
            created() {
                console.log("Comp1:", "create");
            },
            beforeMount() {
                console.log("Comp1:", "beforeMount");
            },
            mounted() {
                console.log("Comp1:", "Mounted");
            },
            beforeUpdate() {
                console.log("Comp1:", "beforeUpdate");
            },
            updated() {
                console.log("Comp1:", "updated");
            },
            beforeDestroy() {
                console.log("Comp1:", "beforeDestroy");
            },
            destroyed() {
                console.log("Comp1:", "destroyed");
            }
        })
        Vue.component('comp', {
            template: '<div id="app"><p>Comp</p></div>',
            data() {
                return {
                }
            },
            beforeCreate() {
                console.log("Comp:", "beforeCreate");
            },
            created() {
                console.log("Comp:", "create");
            },
            beforeMount() {
                console.log("Comp:", "beforeMount");
            },
            mounted() {
                console.log("Comp:", "Mounted");
            },
            beforeUpdate() {
                console.log("Comp:", "beforeUpdate");
            },
            updated() {
                console.log("Comp:", "updated");
            },
            beforeDestroy() {
                console.log("Comp:", "beforeDestroy");
            },
            destroyed() {
                console.log("Comp:", "destroyed");
            }
        })
        new Vue({
            el: '#app',
            data: {
                message: "Hello Vue!",
                awesome: false,
                awesome2: false
            },
            methods: {
                change() {
                    this.awesome = !this.awesome;
                    this.awesome2 = !this.awesome2;
                    console.log("v-if:", this.awesome);
                    console.log("v-show:", this.awesome2);
                }
            },
            beforeCreate() {
                console.log("beforeCreate");
            },
            created() {
                console.log("create");
            },
            beforeMount() {
                console.log("beforeMount");
            },
            mounted() {
                console.log("Mounted");
            },
            beforeUpdate() {
                console.log("beforeUpdate");
            },
            updated() {
                console.log("updated");
            },
            beforeUnmount() {
                console.log("beforeUnmount");
            },
            unmounted() {
                console.log("unmounted");
            }
        })
    </script>
</body>

</html>

console.log:

Vue3测试代码

Vue SFC Playground 在线测试的。

  1. App.vue
javascript 复制代码
// App.vue
<script>

import Comp from './Comp.vue';
import Comp1 from './Comp1.vue';
export default {
    data() {
        return {
            msg: "Hello World!",
            message: "Hello Vue!",
            awesome: false,
            awesome2: false
        };
    },
    methods: {
        change() {
            this.awesome = !this.awesome;
            this.awesome2 = !this.awesome2;
            console.log("v-if:", this.awesome);
            console.log("v-show:", this.awesome2);
        }
    },
    beforeCreate() {
        console.log("beforeCreate");
    },
    created() {
        console.log("create");
    },
    beforeMount() {
        console.log("beforeMount");
    },
    mounted() {
        console.log("Mounted");
    },
    beforeUpdate() {
        console.log("beforeUpdate");
    },
    updated() {
        console.log("updated");
    },
    beforeUnmount() {
        console.log("beforeUnmount");
    },
    unmounted() {
        console.log("unmounted");
    },
    components: { Comp, Comp1 }
}
</script>

<template>
  <div id="app">
    <p>{{ message }}</p>
    <Comp v-if="awesome"></Comp>
    <Comp1 v-show="awesome2"></Comp1>
    <button @click="change">click here!</button>
  </div>
</template>
  1. Comp.vue
javascript 复制代码
// Comp.vue
<script>
export default {
  data() {
    return {
    }
  },
  beforeCreate() {
    console.log("Comp-v-if:", "beforeCreate");
  },
  created() {
    console.log("Comp-v-if:", "create");
  },
  beforeMount() {
    console.log("Comp-v-if:", "beforeMount");
  },
  mounted() {
    console.log("Comp-v-if:", "Mounted");
  },
  beforeUpdate() {
    console.log("Comp-v-if:", "beforeUpdate");
  },
  updated() {
    console.log("Comp-v-if:", "updated");
  },
  beforeUnmount() {
    console.log("Comp-v-if:","beforeUnmount");
  },
  unmounted() {
    console.log("Comp-v-if:","unmounted");
  },
}
</script>

<template>
  <div id="app">
    <p>Comp</p>
  </div>
</template>
  1. Comp1.vue
javascript 复制代码
<script>
export default {
    data() {
        return {

        }
    },
    beforeCreate() {
        console.log("Comp1-v-show:", "beforeCreate");
    },
    created() {
        console.log("Comp1-v-show:", "create");
    },
    beforeMount() {
        console.log("Comp1-v-show:", "beforeMount");
    },
    mounted() {
        console.log("Comp1-v-show:", "Mounted");
    },
    beforeUpdate() {
        console.log("Comp1-v-show:", "beforeUpdate");
    },
    updated() {
        console.log("Comp1-v-show:", "updated");
    },
    beforeUnmount() {
        console.log("Comp1-v-show:","beforeUnmount");
    },
    unmounted() {
        console.log("Comp1-v-show:","unmounted");
    },
}
</script>

<template>
    <div id="app">
        <p>Comp1</p>
    </div>
</template>

console.log:

相关推荐
sunbyte9 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
拼图20911 小时前
element-plus——图标推荐
javascript·vue.js·elementui
midsummer_woo14 小时前
基于springboot+vue+mysql工程教育认证的计算机课程管理平台(源码+论文)
vue.js·spring boot·mysql
喝拿铁写前端15 小时前
技术是决策与代价的平衡 —— 超大系统从 Vue 2 向 Vue 3 演进的思考
前端·vue.js·架构
豆豆(设计前端)15 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
苦瓜若叶睦16 小时前
Vue (Official) v3.0.2 新特性 为非类npm环境引入 globalTypesPath 选项
vue.js
springfe010116 小时前
模块与组件区别
javascript·vue.js
结衣结衣.17 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
哎呦薇18 小时前
从开发到发布:手把手教你将Vue组件上传npm
前端·vue.js
用户38022585982418 小时前
vue3源码解析:生命周期
前端·vue.js·源码阅读