options API
参考官方文档:cn.vuejs.org/api/options…
| 生命周期名称 | 生命周期说明 |
|---|
| beforeCreate | 在组件实例初始化完成之后立即调用。 |
| created | 在绑定属性和事件处理函数之前的钩子函数 |
| beforeMount | 当指令第一次绑定在元素并挂载在父元素之前的钩子函数 |
| mounted | 在绑定元素的父组件被挂载前被调用的钩子函数 |
| beforeUpdate | 在更新包含组件的vNode之前调用 (包括组件更新)的钩子函数 |
| updated | 在包含组件的vNode以及子组件的vNode的更新后调用的钩子函数 |
| activated | 若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用。这个钩子在服务端渲染时不会被调用。 |
| deactivated | 若组件实例是 缓存树的一部分,当组件从 DOM 中被移除时调用。这个钩子在服务端渲染时不会被调用。 |
| beforeUnmount | 卸载绑定元素之前调用的钩子函数 |
| unmounted | 当指令与元素解绑且父组件卸载, 只调用一次的钩子函数 |
总结
options API 中的生命周期钩子都是以 vm 选项的方式进行调用的
composition API
参考官方文档:cn.vuejs.org/api/composi…
| 生命周期名称 | 生命周期说明 |
|---|
| onMounted | 注册一个回调函数,在组件挂载完成后执行。 |
| onUpdated | 注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用。 |
| onUnmounted | 注册一个回调函数,在组件实例被卸载之后调用。 |
| onBeforeMount | 注册一个钩子,在组件被挂载之前被调用。 |
| onBeforeUpdate | 注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。 |
| onBeforeUnmount | 注册一个钩子,在组件实例被卸载之前调用。 |
| onErrorCaptured | 注册一个钩子,在捕获了后代组件传递的错误时调用。 |
| onRenderTracked | 注册一个调试钩子,当组件渲染过程中追踪到响应式依赖时调用。这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。 |
| onRenderTriggered | 注册一个调试钩子,当响应式依赖的变更触发了组件渲染时调用。这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。 |
| onActivated | 注册一个回调函数,若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用。这个钩子在服务器端渲染期间不会被调用。 |
| onDeactivated | 注册一个回调函数,若组件实例是 缓存树的一部分,当组件从 DOM 中被移除时调用。这个钩子在服务器端渲染期间不会被调用。 |
| onServerPrefetch | 注册一个异步函数,在组件实例在服务器上被渲染之前调用。这个钩子函数只能在服务端渲染中使用。 |
注意
- composition API 中的生命周期钩子只能在 setup 函数里面调用
- composition API 中的生命周期钩子几乎都是以回调的方式进行注册使用(发布订阅机制)