vue生命周期

2019-07-08 本文已影响0人 June_Done

参考：（官网）https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子
vue生命周期就是 vue实例从创建到销毁的过程。具体点就是创建实例，初始化数据，编译模板，挂载DOM，渲染→更新→渲染，和销毁实例。
涉及到的主要有几下方法：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
下面一一进行讲解

new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
            },
          //响应数据的变化
            watch:{
                //message必须和监测的data名字一样
                message:function(){
                    console.log('watch:','message 变了')
                }
            },
            methods: {
                init:function(){
                    console.log('这是初始化方法')
                }
            },
            beforeCreate: function () {
                // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
                console.group('------beforeCreate创建前状态------');
              
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
                console.log("%c%s", "color:red", "message: " + this.message)
                console.log("beforeCreate",this.message);
                this.init();    //此时调用Vue的data和method，是调取不到的
            },
            created: function () {
            // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属
            //性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
                console.group('------created创建完毕状态------');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            beforeMount: function () {
              // 在挂载开始之前被调用：相关的 render 函数首次被调用。
                console.group('------beforeMount挂载前状态------');
                console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
            },
            mounted: function () {
                // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档
                //内元素，当 mounted 被调用时 vm.$el 也在文档内。
                // 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，
                //可以用 vm.$nextTick 替换掉 mounted
                console.group('------mounted 挂载结束状态------');
                console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
            },
            beforeUpdate: function () {
            //数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动    
           //移除已添加的事件监听器。
                console.group('beforeUpdate 更新前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            updated: function () {
          //由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
          //当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多        
          //数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性取而代之。
                console.group('updated 更新完成状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message)
            }
        })

步骤详解：

实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作
挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

4.接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...

当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以
（参考：https://segmentfault.com/a/1190000011381906?utm_source=tag-newest
https://www.cnblogs.com/happ0/p/8075562.html ）

vue生命周期

猜你喜欢

热点阅读