vue生命周期

vue官网生命周期图

个人理解

---

• beforeCreate

  实例组件刚创建好，配置数据观测（observe data）之前的阶段。el和data还未初始化。
  在此阶段，一般处理loading事件之类的事情。

• created

  实例创建完成，完成属性绑定，这个阶段DOM并没有生成，$el属性不存在。el未初始化，data初始化。
  此阶段，异步数据的请求操作宜在此调用，实现结束loading，做一些初始化处理，实现一些函数的自执行。

• beforeMounted

  模板编译之前的阶段。el和data完成初始化，computed计算属性中，只更改一次的属性会在此阶段加载。

• mounted

  完成模板编译之后的阶段。页面的vue指令编译成html代码，例如：<p @lick="fun1">{{message}}</p> 会编译成 <p onclick="fun1">compile completed!</p>。
  此阶段，一般向后端发起请求，取到数据之后，配合钩子做一些处理。

• beforeUpdated

  数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前，该阶段不会触发附加的重渲染过程，该钩子在服务器端渲染期间也不会被调用。

• updated

  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
  一般在此钩子出做统一数据更新操作，如果需要区分不同数据的更新，同时操作DOM，可以使用nextTick函数。

• activated
  keep-alive 组件激活时调用。
• deactivated
  keep-alive 组件停用时调用。
• beforeDestroy
  实例销毁之前调用。在这一步，实例仍然完全可用。
• destroy
  Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。