Vue 生命周期(分享)

先看图
Vue 组件/实例初始化：beforeCreate → created → beforeMount → mounted
Vue 组件/实例更新：beforeUpdate → updated
Vue 组件/实例销毁：beforeDestroy → destroyed

常用的生命周期钩子：

1. mounted：发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁 Vue 实例：

1. 销毁后借助 Vue 开发者工具看不到任何消息
2. 销毁后自定义事件会失效，但原生 DOM 事件依然有效
3. 页面并不会销毁，只是无法响应式了
4. 一般不会在 beforeDestroy 中操作数据，因为即便操作数据 ，也不会再更新数据了

最后在叙述一下每一个生命周期能做了什么，能做什么

• beforeCreate

  // 初始化之前，这个阶段什么都不能做，data 数据和 DOM 结构都无法访问到
  

• created

  // 初始化完成，这个阶段可以拿到 data 数据，但是 DOM 还是获取不到
  

• beforeMount

  // 页面渲染之前，这个阶段虚拟 DOM 已经创建好
  // 页面呈现为编译的情况，即使操作 DOM 也会在之后的生命周期中给覆盖
  

• mounted

  // 页面渲染完成，这个阶段真实 DOM 渲染完毕，可以在这个阶段操作 DOM
  

• beforeUpdate

  // 更新之前，这个时候数据更新了，但是页面还没有更新，diff 算法也是在这之后开始的
  

• updated

  // 更新完成，页面与数据保持一致
  

• beforeDestroy

  // 销毁前，这个时候 data 和 Vue 中的其他配置项还可以获取
  

• destroyed

  // 销毁完成，移除了数据响应式，移除了子组件和自定义事件，此时页面结构和原生事件还在