vue生命周期

Vue实例生命周期

Vue实例生命周期,是指vue实例对象从创建到死亡,所经历的特定阶段,分为四个阶段 初始化,挂载,更新,死亡

初始化

• beforeCreate: 此时实例刚刚创建还未完成data数据代理,和数据劫持,不能够使用data和methods

  beforeCreate() {
    console.log(this.msg, this.update); // undefined ,undefined
    console.log(this.$options.data()); // 可以通过$options 找到data 数据       
  },

• created: 实例已经完成初始化工作,可以使用data和methods,如果此时更新data数据,会影响首屏渲染,此时模板尚未挂载不能获取DOM
  在此处可以执行异步回调发送Ajax请求,更新data

挂载

• beforeMounted: 在挂载前调用,此时模板已经在内存被编译DOM,避免在此更新数据,浪费性能效率
• mounted: 此时页面已经挂载完毕 可以发送请求获取数据, 获取DOM和ref 许多插件要在页面展示完成之后调用,如swiper

更新

• beforeUpdate: 页面开始更新前调用, 数据是新的,现在获取标签数据还是旧的
• updated : 页面更新完毕调用,此时获取页面标签和data 都是最新的.

死亡

• beforeDestory: 实例将要死亡前调用,此时可以做一些收尾工作,如清除定时器,亦或者解绑全局事件总线

• Destory: 组件对象已经死亡,此时虽然vm已死亡，不能动态管理标签模板，但还是可以正常访问。

  能够让程序员在特定的钩子中做特定的事情，干预ui的渲染，