2021-05-20

vue生命周期

Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程

生命周期分为四个方面,八个阶段 

1、beforeCreate（创建前）    2、created（创建后）

3、beforeMount（挂载前）     4、mounted（挂载后）

5、beforeUpdate（更新前）    6、updated（更新后）

7、beforeDestory（销毁前）   8、destoryed（销毁后）

1、beforeCreate（创建前） 

表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。

// 一. 初始化
  // new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
  beforeCreate() {
    console.log('beforeCreate -- 执行')
    console.log(this.msg) // undefined
  },

 

 2、created（创建后）

data和methods初始化以后  ,场景: 网络请求, 注册全局事件

3、beforeMount（挂载前）

真实DOM挂载之前         场景: 预处理data, 不会触发updated钩子函数

 4、mounted（挂载后）

 真实DOM挂载以后     场景: 挂载后真实DOM

 

5、beforeUpdate（更新前）

前提: data数据改变才执行

6、updated（更新后）

当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。

 

7、beforeDestory（销毁前） 

组件销毁之前调用 ，在这一步，实例仍然完全可用。

 

 8、destoryed（销毁后）

组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。