【刨根问底】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:

相关推荐
markyankee10124 分钟前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
翻滚吧键盘3 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹3 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_970956394 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘4 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
叹一曲当时只道是寻常5 小时前
vue中添加原生右键菜单
javascript·vue.js
markyankee1017 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
khalil8 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
速易达网络17 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj16899718 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode