【Vue.js】Vue 的生命周期函数

95 阅读3分钟

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注册一个异步函数,在组件实例在服务器上被渲染之前调用。这个钩子函数只能在服务端渲染中使用。

注意

  1. composition API 中的生命周期钩子只能在 setup 函数里面调用
  2. composition API 中的生命周期钩子几乎都是以回调的方式进行注册使用(发布订阅机制)