生命周期

生命周期

参考网址： https://www.cnblogs.com/Syinho/p/12482012.html

什么是生命周期函数

在vue实例化过程中的某个时间点会自动触发的函数

生命周期的三个阶段及相关的钩子

创建阶段

• beforeCreate

• created

• beforeMount

• mounted

运行阶段

• beforeUpdate
• updated

销毁阶段

• beforeDestroy
• destroyed

每个生命周期函数的特点

beforeCreate
创建之前，在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化，不能访问data数据

beforeCreate(){
    console.log('beforeCreate',this.msg);
},

created
创建之后，data和methods中的数据已经初始化，此时可以访问data数据
一般在这个函数中发起ajax请求

created(){
    console.log('created',this.msg);
},

beforeMount
挂载之前，表示模板已经在内存中编译完成，但尚未把模板渲染到页面中。
此时还没有渲染用数据生成的新dom

beforeMount(){
    console.log('beforeMount',this.$el);
},

mounted
表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
此时可以访问dom

mounted(){
    console.log('mounted',this.$el);
},

beforeUpdate
当且仅当data被修改时才触发这个生命周期函数，但此时仅仅是数据被修改，页面还未更新。
如果修改的data数据并没有在模板中使用，也不会触发更新

beforeUpdate(){
    console.log('beforeUpdate',this.msg);
    console.log('beforeUpdate',this.$el.innerHTML);
},

updated
会根据新数据生成最新的内存DOM树，重新渲染到真实的页面中去，此时的data数据和页面已完成同步

updated(){
    console.log('updated',this.$el.innerHTML);
},

beforeDestroy
当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段。
当执行beforeDestory的时候，实例身上所有的data和所有的methods，以及过滤器、指令...都处于可用状态，此时还没有真正执行销毁过程。

beforeDestroy(){
    console.log('beforeDestroy');
},

destroyed
当执行到destoryed函数的时候，组件已经被全部销毁了，data与methods均不可用。
更改data数据，页面不会更新

destroyed(){
    console.log('destroyed');
}