vue3如何使用生命周期
时间: 2023-10-17 18:28:39 浏览: 40
在 Vue 3 中,生命周期函数已经发生了一些改变。以下是 Vue 3 中常用的生命周期函数和它们的用法:
1. `beforeCreate`:在实例创建之前被调用。此时数据观测和事件配置尚未完成,因此无法访问实例中的 data、computed 或 methods。
2. `created`:在实例创建完成后被调用。可以在这里进行数据的初始化、异步请求等操作。
3. `beforeMount`:在实例挂载之前被调用。DOM 结构尚未生成,但虚拟 DOM 已经生成。
4. `mounted`:在实例挂载完成后被调用。可以在这里访问实例的 DOM 元素,进行一些需要 DOM 的操作。
5. `beforeUpdate`:在数据更新之前被调用。此时虚拟 DOM 已经重新渲染,但尚未应用到实际 DOM 上。
6. `updated`:在数据更新完成后被调用。可以在这里进行操作,但要避免无限循环更新的情况。
7. `beforeUnmount`:在实例卸载之前被调用。可以在这里清理定时器、取消订阅等操作。
8. `unmounted`:在实例卸载完成后被调用。此时实例已经不再被使用,可以进行一些资源的释放。
在 Vue 3 中,`beforeDestroy` 和 `destroyed` 生命周期函数被废弃,取而代之的是 `beforeUnmount` 和 `unmounted`,以更好地对应组件的挂载和卸载过程。
你可以在组件中通过在 `setup` 函数中返回一个对象的方式来使用生命周期函数。例如:
```javascript
import { onMounted, onUpdated, onUnmounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('mounted');
});
onUpdated(() => {
console.log('updated');
});
onUnmounted(() => {
console.log('unmounted');
});
return {};
},
};
```
注意,在 Vue 3 中,`setup` 函数是组件中的一个必需选项,并且它代替了 Vue 2.x 中的 `beforeCreate` 和 `created` 生命周期函数。