Vue 生命周期函数

1. 生命周期

个人理解，Vue生命周期就是一个Vue实例从创建、更新到消失的一段旅程，在对应的过程能执行的函数，即为钩子函数

参考网上的Vue生命周期图示:

2.钩子函数的用途

2.1 beforeCreate()

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

beforeCreate() {
   console.log('el: ' + this.$el);         //el: undefined
   console.log('data: ' + this.$data);     // data: undefined
   console.log('message: ' + this.message);//message: undefined
},

2.2 created()

此时已完成数据观测 (data observer) 和 event/watcher 事件配置，即可以访问data中的数据，调用methods中的方法，可通过computed和watch监听数据，而数据没有挂载，$el 属性不可用

created() {
    console.log('el: ' + this.$el);      // el: undefined
    console.log('data: ' + this.$data);  //data: [object Object]
    console.log('message: 'this.message);//message: 我是message
},

2.3 beforeMount()

在挂载之前调用，此时已经完成模板编译，可以获取到 $el ，data数据和指令已生成HTML，还没挂载（渲染）到页面上，仅存在内存中

beforeMount() {
    console.log('el: ' + this.$el);         //el: [object HTMLDivElement]
    console.log('data: ' + this.$data);     //data: [object Object]
    console.log('message: ' +this.message); //message: 我是message
},

2.4 mounted()

在挂载之后调用，此时页面已经渲染完成，文档中已存在dom节点，可以操作dom节点

mounted() {
    console.log('el: ' + this.$el);         //el: [object HTMLDivElement]
    console.log('data: ' + this.$data);     //data: [object Object]
    console.log('message: ' +this.message); //message: 我是message
},

2.5 beforeUpdate()

在更新的数据挂载到页面之前调用。数据改变时，页面的数据并没有更新，但data中的数据已经更新完毕

//改变this.message
beforeUpdate() {
    console.log('el: ' + this.$el);         //el: [object HTMLDivElement]
    console.log('data: ' + this.$data);     //data: [object Object]
    console.log('message: ' +this.message); //message: 我是message2
},

2.6 updated()

页面数据更新完成后调用

//改变this.message
updated() {
    console.log('el: ' + this.$el);         //el: [object HTMLDivElement]
    console.log('data: ' + this.$data);     //data: [object Object]
    console.log('message: ' +this.message); //message: 我是message2
},

2.7 beforeDestroy()

在实例被销毁前调用，此时实例仍可访问

//调用 this.$destroy()
beforeDestroy() {
    console.log('el: ' + this.$el);         //el: [object HTMLDivElement]
    console.log('data: ' + this.$data);     //data: [object Object]
    console.log('message: ' +this.message); //message: 我是message
},

2.8 destroyed()

组件已经全部销毁，所有的data、methods都无法使用

//调用 this.$destroy()
destroyed() {
    console.log('el: ' + this.$el);         //el: [object HTMLDivElement]
    console.log('data: ' + this.$data);     //data: [object Object]
    console.log('message: ' +this.message); //message: 我是message
},