Vue.js 的生命周期在 Vue 2 和 Vue 3 中有所不同,但基本的概念是相似的。Vue 的生命周期是指 Vue 实例从创建到销毁的整个过程,这个过程中 Vue 实例会触发一系列的事件,我们称之为生命周期钩子(Lifecycle Hooks)。开发者可以利用这些钩子来执行自己的代码,如数据初始化、DOM 操作、事件监听/移除等。
Vue 2 生命周期
Vue 2 提供了以下生命周期钩子:
- beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
- beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
- mounted:el 被新创建的 vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el 也在文档内。
- beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
- updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用这个钩子。当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作。但是要避免更改状态,因为这可能会导致无限循环的更新。
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
Vue 3 中的 setup
setup
函数是 Vue 3 中 Composition API 的入口点。它在组件的 beforeCreate
和 created
钩子函数之前被调用,是组件中使用 Composition API 的第一个函数。在 setup
函数中,你可以定义响应式数据、计算属性、生命周期钩子等。
setup
函数的两个重要特点:
- 调用时机 :在组件的
beforeCreate
和created
生命周期钩子之前调用,因此在这个函数中不能访问组件的this
上下文(因为此时组件实例尚未创建)。 - 返回值 :
setup
函数的返回值是一个对象,这个对象中的所有属性和方法都将被合并到组件的上下文中,并可以在模板中直接使用。
Vue 3 生命周期(包含 setup
)
结合 setup
函数,Vue 3 的生命周期可以看作是在组件的不同阶段自动调用的函数集合,这些函数允许执行自定义的逻辑。以下是Vue 3生命周期的完整列表(包含Options API和Composition API中的钩子):
- Options API 生命周期钩子 (与Vue 2相似,但名称可能有所变化):
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeUnmount(Vue 2中为beforeDestroy)
- unmounted(Vue 2中为destroyed)
- activated(与
<keep-alive>
相关) - deactivated(与
<keep-alive>
相关)
- Composition API 生命周期钩子 (新增或替代):
- setup(在
beforeCreate
和created
之前调用,用于定义响应式数据和函数) - onBeforeMount(替代Vue 2的
beforeMount
) - onMounted(替代Vue 2的
mounted
) - onBeforeUpdate(替代Vue 2的
beforeUpdate
) - onUpdated(替代Vue 2的
updated
) - onBeforeUnmount(替代Vue 2的
beforeDestroy
) - onUnmounted(替代Vue 2的
destroyed
) - onErrorCaptured(新的生命周期钩子,用于捕获来自子孙组件的异常)
- setup(在
需要注意的是,虽然Options API和Composition API提供了不同的方式来定义和使用生命周期钩子,但它们都可以在同一个组件中使用。然而,在实际开发中,通常会选择其中一种API风格来保持代码的一致性和可维护性。