vue生命周期理解或应用

beforeCreate()

• 实例初始化之后，但是属性，方法， 事件还未被创建时调用
• 应用：
  • 一般用于vue实例外的属性，方法，事件调用

created()

• 实例化完成后调用，此时数据、属性、方法、watch/event事件回调已完成配置，但挂载未开始，$el属性不可见
• 应用：
  • 异步数据请求、数据初始化适宜在这个阶段进行调用
  • 如想元素挂载完成后进行操作可以使用this.$nextTick()方法进行回调获取

beforeMount()

• 在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

mounted()

• 初始数据DOM挂载渲染完成，此周期只能操作初始数据所形成的DOM，对于异步数据所挂载的DOM却无法获取

beforeUpdate()

• 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。该钩子在服务器端渲染期间不被调用。

updated()

• 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
• 应用：
  • 任何数据的更新，如果要做统一的业务逻辑处理

beforeDestroy()

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

destroyed()

• Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
• 应用：
  • 当有多个实例在页面中，其中的1个或者多个实例只触发一次后，后面所操作的数据不打算对其进行实例进行操作时，可销毁实例

activated()

• keep-alive 组件激活时调用。

deactivated()

• keep-alive 组件停用时调用。