Vue 基础【3】— 生命周期

作者: 弱冠而不立 | 来源:发表于2020-11-23 13:40 被阅读0次

vue3较vue2的特别之处 - 生命周期
Vue
【Vue3 从入门到实战进阶式掌握完整知识体系】002-Vue
vue面试必会
01-vue入门
Vue 基础【3】— 生命周期
vue的生命周期
2018-07-30 vue相关总结
（vue）vue知识点小结(1)
vue3的知识整理

生命周期示例图：

各个生命周期的作用

生命周期	描述
beforeCreate	组件实例被创建之前，组件的属性生效之前
created	组件实例已经被创建，属性也绑定了，但是真实DOM未生成，$el不可用
beforeMount	开始挂载之前被调用，首次调用render函数
mounted	实例被挂载到DOM上之后被调用
beforeUpdate	data中数据是新的，但是页面上的数据还没更新
update	组件数据更新之后，页面和data数据已经同步
activated	keep-alive专属，组件被激活时调用
deactivated	keep-alive专属，组件被销毁时调用
beforeDestory	组件被销毁前调用
destoryed	组件被销毁时调用

对于生命周期的规律，可以自己写个小样例来探究一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lifeCycle-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>{{ message }}</div>
        <input type="text" v-model="message">
       <button @click="destroyApp">destroyApp</button>
    </div>
    
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            destroyApp: function() {
                //清理它与其它实例的连接，解绑它的全部指令及事件监听器。
                console.log(this.$destroy());
            }
        },
        beforeCreate() {
            console.group("----------beforeCreate状态----------");
            console.log("this.$el:", this.$el);
            console.log("this.$data:", this.$data);
            console.log("this.message", this.message);
        },
        created() {
            console.group("---------created状态-----------");
            console.log("this.$el:", this.$el);
            console.log("this.$data:", this.$data);
            console.log("this.message", this.message);
        },
        beforeMount() {
            console.group("---------beforeMount状态-----------");
            console.log("this.$el:", this.$el);
            console.log("this.$data:", this.$data);
            console.log("this.message", this.message);
        },
        mounted() {
            console.group("---------mounted状态-----------");
            console.log("this.$el:", this.$el);
            console.log("this.$data:", this.$data);
            console.log("this.message", this.message);
        },
        beforeUpdate() {
            console.group("---------beforeUpdate状态-----------");
            console.log("this.$el:", this.$el);
            console.log("this.$data:", this.$data);
            console.log("this.message--data中的数据", this.message);
            console.log("页面上的数据",document.getElementById("msg").innerText);
        },
        updated() {
            console.group("---------updated状态-----------");
            console.log("this.$el:", this.$el);
            console.log("this.$data:", this.$data);
            console.log("this.message--data中的数据", this.message);
            console.log("页面上的数据",document.getElementById("msg").innerText);
        },
        beforeDestroy() {
            console.group("---------beforeDestroy状态-----------");
            console.log("this.$el:", this.$el);
            console.log("this.$data:", this.$data);
            console.log("this.message", this.message);
        },
        destroyed() {
            console.group("---------destroyed状态-----------");
            console.log("this.$el:", this.$el);
            console.log("this.$data:", this.$data);
            console.log("this.message", this.message);
        },
    })
</script>

</html>