组件的生命周期

Posted 2020-12-13 sna-ling

组件的生命周期

问题：页面加载后执行，window有onload,jQuery有$(document).ready()

解决：Vue.js实例的生命周期：官网/教程/Vue实例/生命周期图示

 

Vue.js实例的生命周期分为四个阶段：

(1)创建(create)阶段  new Vue组件对象创建完成，但尚未挂在到DOM树,

此时$el:undefined,data:{ ... }可以ajax请求并初始化数据。

(2)挂载(mount)阶段  组件到DOM树，组件首次加载完成，此时:$el:中有了DOM元素，data:{ .... }可以访问元素对象了。

(3)更新(update)阶段  组件所绑定的Model数据发生了变化,需要更新视图。

(4)销毁(destroy)阶段 调用了$destroy()方法，组件被销毁。但是，页面元素不消失，只是不再更新而已。

 

为了监听四个阶段，Vue.js提供了八个钩子函数

beforeCreate(){ } 实例创建之前自动调用-----$el:undefined,data:undefined

created(){  }  实例创建完成自动调用-----$el:undefined,data:{ ... }---已可以获取或操作模型数据---可ajax请求

beforeMount(){  }  实例挂载到DOM树之前调用-----$el:undefined,data:{..  }

mouted(){  }   实例挂载到DOM树之后调用----$el:DOM,data:{ ... }---可ajax请求数据，也可操作页面元素。

beforeUpdate(){ }实例中模型数据发生改变需要更新DOM之前调用

updated(){ } 实例中模型数据发生改变需要更新DOM之后调用。

beforeDestroy(){ }  实例被从DOM上销毁之前调用

destroyed(){  } 实例被从DOM上销毁之后调用