1. 前言
在 Vue.js 中，生命周期是指一个 Vue 实例从创建到销毁的过程。Vue 提供了一系列的生命周期钩子（lifecycle hooks），让开发者可以在不同的阶段执行特定的代码。了解这些生命周期钩子是构建 Vue 组件的基础，能够帮助你在合适的时机执行代码，处理数据和事件。
2. 生命周期
2.1 创建阶段
该阶段包括实例的初始化和设置，在此阶段无法在DOM文件中查看到我们的Vue组件的信息
- beforeCreate
实例被创建之后，数据观测和事件配置之前被调用的钩子，在此阶段无法访问data与methods
beforeCreated(){console.log('beforeCreate:实例被创建之前')
}- created
在实例创建完成后被调用，在此阶段，实例已经完成数据观测以及事件配置，可以访问data与methods
created(){console.log('created:实例已创建，可以访问data&methods')
}2.2 挂载阶段
这个阶段包括将组件挂载到DOM中
- beforeMount
在挂载之前被调用，在该阶段，模板并没有被渲染到DOM
beforemount(){console.log('beforemount:模板尚未被挂载到 DOM')
}- mounted
在挂载后被调用，此时组件已被渲染到 DOM 中。可以在这里进行 DOM 操作或发送 AJAX 请求
mounted() {console.log('mounted: 组件已挂载到 DOM 中。');}2.3 更新阶段
这个阶段包括当数据变化时，组件的重新渲染
- beforeUpdate
在数据变化后，DOM 重新渲染之前被调用。在这个阶段可以进行一些操作，但不要直接修改数据。
beforeUpdate() {console.log('beforeUpdate: 数据变化前调用。');}- updated
在组件重新渲染后被调用。此时可以访问更新后的 DOM
updated(){console.log('updated:数据变化后调用')
}2.4 销毁阶段
该阶段包含组件的销毁过程
- beforeDestroy
在实例销毁之前被调用。在这个阶段，实例仍然可以访问到数据和方法，可以进行清理操作（例如，清除定时器、解除事件监听等）
beforeUpdated(){console.log('beforeDestroy:实例销毁前被调用，清理相关资源')
}- destroyed
在实例销毁后被调用，在此阶段，所有的事件监听与子实例都会被解除
destroyed(){console.log('destroyed:实例已被销毁')
}3. 实例
使用生命周期钩子函数进行数据加载，DOM操作和清理工作
<template><div><h1>用户列表</h1><ul v-if="users.length"><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul><p v-else>加载中...</p></div>
</template><script>
export default {data() {return {users: [], // 存储用户数据loading: true, // 控制加载状态timer: null // 存储定时器 ID};},created() {console.log('组件创建完成，数据尚未挂载到页面');this.fetchUsers(); // 模拟从 API 获取数据},mounted() {console.log('组件挂载到页面，数据已经加载完毕');// 模拟定时器操作this.timer = setInterval(() => {console.log('定时器正在运行...');}, 1000);},beforeUpdate() {console.log('组件数据即将更新');},updated() {console.log('组件数据更新完成');},beforeDestroy() {console.log('组件销毁前，清理工作开始');if (this.timer) {clearInterval(this.timer); // 清除定时器}},destroyed() {console.log('组件销毁后，所有清理工作完成');},methods: {fetchUsers() {// 模拟从 API 获取数据setTimeout(() => {this.users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }];this.loading = false;}, 2000); // 假装这个请求需要2秒钟}}
};
</script>