vue-生命周期

官网偷的图，大概vue生命周期就是从init-create-monted-destroy，上边的图应该很清楚，一目了然了。vue官方提供了生命周期的钩子函数与生命周期对应，分别是created、monted、destroyed等。

一、created  实例创建完成后立即执行

var vm=new Vue({ el:'#app', data:{ mes:'123' }, created:function(){ console.log(this.mes) } });

这里边的this指的是当前vue实例，该函数是在vue实例被创建的时候立即调用，在执行这个过程的时候除了没有被挂载以外，数据检索，方法运算等都执行完毕了。

var vm=new Vue({ el:'#app', data:{ mes:'123' }, created:function(){ console.log(this.mes+">>>>>>mes") console.log(this.$el+">>>>>>created:el") } }); console.log(vm.$el+">>>>>>>el")

执行效果图

二、monted  当实例被挂载到元素上后立即执行，但是monted执行时机不一定是子组件都被挂载完毕之后执行，也就是说子组件未被挂载时也可能执行该函数

三、destroy 当实例销毁时立即执行 

除了这三个函数以外还有beforeCreated、beforeMonted、beforeDestroy、updated等钩子函数，除了beforeCreated和created以外其他函数大多都在服务器端渲染期间不被调用

 

转载于:https://www.cnblogs.com/Tiandaochouqin1/p/11483331.html