当前位置：首页 > news >正文

vue 的生命周期函数

news 2025/7/9 21:49:45

Vue 生命周期函数（生命周期钩子）是 Vue 实例从创建到销毁过程中，不同阶段所触发的特定函数。理解这些生命周期函数对于开发 Vue 应用至关重要，因为它们让你在不同的生命周期阶段执行代码，比如数据初始化、DOM 渲染完成、组件销毁等。

每个阶段有特定的生命周期函数，我们可以在这些函数中执行自定义操作。以下是常见的 Vue 生命周期函数：

beforeCreate
在 Vue 实例初始化之后，数据观测 (data) 和事件/侦听器 (events/watcher) 设置之前调用。此时无法访问 data、computed、methods 等属性。
- 使用场景：通常不常用，因为此时实例还未准备好。
created
Vue 实例被创建后，data、computed 和 methods 等已设置完成，但 DOM 还没有渲染。此时可以访问到数据和事件监听器，通常用来进行初始化操作（如异步请求数据）。
- 使用场景：适合做数据请求、事件监听器的绑定等。

beforeMount
在挂载开始之前调用，相关的 render 函数首次被调用，但 DOM 元素还没有挂载。
- 使用场景：通常不需要使用，除非需要做一些特定的挂载前操作。
mounted
在挂载完成后调用，el 被新创建的 vm.$el 替代。此时所有的 data 和 computed 已经绑定到 DOM，DOM 可以安全地访问了。
- 使用场景：适合进行 DOM 操作、依赖于 DOM 的初始化等。

beforeUpdate
在数据更改之后，DOM 更新之前调用。此时你可以访问到旧的数据和 DOM，但新的数据和视图还未更新。
- 使用场景：可以进行一些操作，计算新旧数据变化的差异，或准备更新前的逻辑。
updated
在数据更新并且视图重新渲染之后调用。此时可以访问到更新后的 DOM。
- 使用场景：适合进行视图更新后的操作，避免直接修改数据，因为此时数据已经更新。

beforeDestroy
在实例销毁之前调用。在这时，实例仍然是完全可用的，但组件的所有事件监听器、子组件实例等还未销毁。
- 使用场景：适合清理定时器、取消网络请求、移除事件监听等操作。
destroyed
实例销毁后调用。此时，所有的事件监听器和子组件的实例都被销毁。
- 使用场景：适合进行销毁后的清理工作。

beforeCreate   -->   created   -->   beforeMount   -->   mounted   -->   beforeUpdate   -->   updated   -->   beforeDestroy   -->   destroyed

生命周期钩子	说明	使用场景
`beforeCreate`	实例初始化时调用，数据观测、事件监听器未设置	初始化设置，初始化数据不完全时不常用。
`created`	实例创建后调用，可以访问 `data` 和 `methods`，但未挂载到 DOM	数据请求、初始化逻辑、订阅事件等。
`beforeMount`	在挂载开始之前调用，`el` 未插入 DOM	通常不需要使用，除非需要在挂载前做准备工作。
`mounted`	挂载完成后调用，DOM 渲染完成，可以进行 DOM 操作	访问 DOM 进行 DOM 操作，数据绑定完成。
`beforeUpdate`	数据更新前调用，DOM 更新前	更新前的数据和视图比较，准备更新的操作。
`updated`	数据更新后调用，DOM 渲染后	数据更新后的 DOM 操作，避免直接修改数据。
`beforeDestroy`	实例销毁前调用，销毁前仍可访问实例。	清理定时器、网络请求、事件监听等资源。
`destroyed`	实例销毁后调用，销毁时实例的所有事件监听器和子组件实例也销毁。	销毁后清理工作，如移除事件监听器等。