vue实例的生命周期

Posted 2020-10-10 专注前端开发

每个Vue实例在被创建之前都要经过一系列的初始化过程，设置数据监听、编译模板、在dom上挂载实例、数据变化时更新DOM，在这个过程中会运行一些叫做生命周期钩子的函数，让用户能够在一些特定的场景下添加他们自己的代码。

一、相关属性
1、beforeCreate
在实例初始化之后，数据观测和事件配置之前调用该钩子。
2、created
在实例创建完成后，即实例完成数据观测，属性和方法的运算，watch/event事件回调后立即调用该钩子。由于挂载阶段还没开始，$el属性目前不可见。
3、beforeMount
在挂载前调用该钩子。
4、mounted
el被新创建的vm.$el替换，并挂载到实例后调用该钩子，渲染。
5、beforeUpdate
数据更新了，在虚拟DOM重新渲染和打补丁之前调用该钩子。
6、updated
数据更新了，在虚拟DOM重新渲染和打补丁之后调用该钩子，重绘。
7、beforeDestroy
实例销毁前调用该钩子。
8、destroyed
Vue实例销毁后调用该钩子。调用后，Vue实例指示的所有东西会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

二、基本用法

<div id="J_app_lifecycle"> {{msg}} <input type="text" v-model="msg"></div>

var data = { msg: ‘learning vue lifecycle‘ };
var vapp = new Vue({
    el:"#J_app_lifecycle",
    data:data,
    beforeCreate:function(){
        console.log(‘beforeCreate:‘+this.msg);
    },
    created:function(){
        console.log(‘created:‘+this.msg);
    },
    beforeMount:function(){
        console.log(‘beforeMount:‘+this.msg);
    },
    mounted: function () {
    //el被新创建的life.$el替换，并挂载到实例上去之后调用该钩子。
      this.$nextTick(function () {
        console.log(‘mounted:‘+this.msg);
      })
    },
    beforeUpdate:function(){
        console.log(‘beforeUpdate:‘+this.msg);
    },
    updated: function () {
      this.$nextTick(function () {
        console.log(‘updated:‘+this.msg);
      })
    },
    beforeDestroy:function(){
    //实例销毁之前调用。
        console.log(‘beforeDestroy:‘+this.msg);
    },
    destroy: function(){
    //Vue实例销毁后调用。
        console.log(‘destroy:‘+this.msg);
    }
})