Vue 2.0 生命周期-钩子函数理解

时间：2022-01-20 19:09:13

Vue 2.0 + 生命周期钩子在项目过程中经常用到，所以闲下来整理了下，直接复制下面的实例运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <keep-alive>
        <my-components msg="hello" v-if="show"></my-components>
    </keep-alive>
    </div>
</body>
<script>
    var child = {
        template: '<div>from child: {{msg}}</div>',
        props: ['msg'],
        data: function () {
            return {
                childMsg: 'child'
            };
        },
        deactivated: function () {
            console.log('component deactivated====1!');
        },
        activated: function () {
            console.log('component activated====2');
        }
    };
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                message: 'father',
                show: true
            };
        },
        methods:{
            MethodTest:function(){
                console.log("函数被调用")
            }
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'MethodTest':this.MethodTest
            }
            console.log(state);
            // console.log(this.MethodTest());
        },
        created: function () {
            console.group('created 创建完毕状态');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'MethodTest':this.MethodTest
            }
            console.log(state);
            this.MethodTest()
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'MethodTest':this.MethodTest
            }
            console.log(this.$el);
            console.log(state);
            this.MethodTest()
        },
        mounted: function () {
            console.group('mounted 挂载结束状态');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'MethodTest':this.MethodTest
            }
            console.log(this.$el);
            console.log(state);
            this.MethodTest()
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'MethodTest':this.MethodTest
            }
            console.log(this.$el);
            console.log(state);
            this.MethodTest()
            console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML);
        },
        updated: function () {
            console.group('updated 更新完成状态');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'MethodTest':this.MethodTest
            }
            console.log(this.$el);
            console.log(state);
            this.MethodTest()
            console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'MethodTest':this.MethodTest
            }
            console.log(this.$el);
            console.log(state);
            this.MethodTest()
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'MethodTest':this.MethodTest
            }
            console.log(this.$el);
            console.log(state);
            this.MethodTest()
        },
        components: {
            'my-components': child
        }
    });
</script>
</html>

查看控制台进行调试：

1. app.show = false;

　　修改了data的值，所以会触发beforeUpdate和updated钩子

2. app.$destroy()

　　我们发现实例依然存在，但是此时变化已经发生在了其他地方，根据官方文档描述：Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

　　可以在进行测试：app.message = "销毁了"测试，发现已经销毁

3. app.message = '注意页面展示dom是否被更新'

　　beforeUpdate 与 updated console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML); 看变化；

　　beforeUpdate和updated触发时，el中的数据都已经渲染完成，但根据beforeUpdate == "father"而updated == "注意页面展示dom是否被更新"可知，只有updated钩子被调用时候，组件dom才被更新。

 

根据官方文档和例子测试对vue 2.0 生命周期函数总结如下：

　　 beforeCreate    
　　　　在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
　　　　此阶段data/methods/el 都不可见

　　 created 
　　　　实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
　　　　然而，挂载阶段还没开始，$el 属性目前不可见。

　　 beforeMount 
　　　　在挂载开始之前被调用：相关的 render 函数首次被调用。
　　　　data和el均已经初始化，但从{{message}}等现象可以看出此时el并没有渲染进数据，el的值为“虚拟”的元素节点
　　　　注意：并且组件中activated 此时激活

　　 mounted
　　　　el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
　　　　此时el渲染数据，当有data中数据变化时触发beforeUpdate,updated生命钩子

　　 beforeUpdate    
　　　　数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
　　　　此时el中的数据渲染完成，但是页面dom中展示的数据不更新

　　 updated 
　　　　由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
　　　　此时el中的数据渲染完成，同时页面dom中展示的数据更新了

　　 beforeDestroy   
　　　　实例销毁之前调用。在这一步，实例仍然完全可用。
　　　　注意：并且组件中deactivated 此时激活

　　 destroyed   
　　　　Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

　　 activated   
　　　　keep-alive 组件激活时调用。（beforeMount ：el初始化时候触发）

　　 deactivated 
　　　　keep-alive 组件停用时调用。（beforeDestroy：vue实例销毁之前触发）
 
 
以上是个人的理解，如果有什么不对的地方可以一起交流

 

　　

 

标签：

相关文章