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 组件停用时调用。