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

Vue.js 生命周期详解

news 2025/9/25 14:25:40

Vue.js 生命周期详解

在 Vue.js 中，生命周期钩子函数是组件在不同阶段执行的函数。以下是主要的生命周期钩子：

Vue 2 生命周期钩子

export default {// 1. 创建前 - 在实例初始化之后，数据观测和事件配置之前被调用beforeCreate() {console.log('beforeCreate - 组件实例刚被创建')},// 2. 创建后 - 实例创建完成后被调用，数据观测已完成created() {console.log('created - 组件实例创建完成')// 可以访问 data、methods，但 DOM 还未生成},// 3. 挂载前 - 在挂载开始之前被调用，相关的 render 函数首次被调用beforeMount() {console.log('beforeMount - 模板编译完成，但尚未挂载到页面')},// 4. 挂载后 - 实例被挂载后调用，DOM 已生成mounted() {console.log('mounted - 组件已挂载到页面')// 可以操作 DOM，发起网络请求},// 5. 更新前 - 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前beforeUpdate() {console.log('beforeUpdate - 数据更新前')},// 6. 更新后 - 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用updated() {console.log('updated - 数据更新完成')},// 7. 销毁前 - 实例销毁之前调用，实例仍然完全可用beforeDestroy() {console.log('beforeDestroy - 组件销毁前')// 清理定时器、取消订阅等},// 8. 销毁后 - 实例销毁后调用，所有的事件监听器和子实例都被移除destroyed() {console.log('destroyed - 组件已销毁')}
}

Vue 3 组合式 API 生命周期

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted,onActivated,onDeactivated
} from 'vue'export default {setup() {// 相当于 Vue 2 的 beforeCreate 和 createdconsole.log('setup - 组合式 API 的入口')onBeforeMount(() => {console.log('onBeforeMount - 挂载前')})onMounted(() => {console.log('onMounted - 挂载后')})onBeforeUpdate(() => {console.log('onBeforeUpdate - 更新前')})onUpdated(() => {console.log('onUpdated - 更新后')})onBeforeUnmount(() => {console.log('onBeforeUnmount - 卸载前')})onUnmounted(() => {console.log('onUnmounted - 卸载后')})// KeepAlive 组件特有的生命周期onActivated(() => {console.log('onActivated - 被激活时')})onDeactivated(() => {console.log('onDeactivated - 被停用时')})}
}

uni-app 中的页面生命周期

在 uni-app 中，除了 Vue 的生命周期外，还有页面特有的生命周期：

export default {// Vue 生命周期created() {console.log('页面实例创建完成')},mounted() {console.log('页面挂载完成')},// uni-app 页面生命周期onLoad(options) {console.log('页面加载，可以获取路由参数:', options)// 适合接收页面参数，初始化数据},onShow() {console.log('页面显示')// 每次页面显示时触发，适合刷新数据},onReady() {console.log('页面初次渲染完成')// 页面初次渲染完成，可以操作 DOM},onHide() {console.log('页面隐藏')},onUnload() {console.log('页面卸载')// 清理工作},onPullDownRefresh() {console.log('用户下拉刷新')// 处理下拉刷新逻辑setTimeout(() => {uni.stopPullDownRefresh()}, 1000)},onReachBottom() {console.log('页面滚动到底部')// 加载更多数据},onShareAppMessage() {console.log('用户点击分享')return {title: '分享标题',path: '/pages/index/index'}}
}

在您的代码中的具体应用

在您之前的个人中心代码中，主要使用了：

export default {data() {return {// 数据定义}},// 计算属性computed: {// 计算属性定义},// uni-app 页面生命周期 - 页面显示时触发onShow() {this.initPage();},methods: {initPage() {this.checkLoginStatus();if (this.isLogin) {this.loadUserInfo();this.loadOrderCount();}},// 其他方法...},// Vue 生命周期 - 组件创建完成后调用created() {console.log('组件创建完成')},// Vue 生命周期 - 组件挂载到页面后调用mounted() {console.log('组件挂载完成')}
}

生命周期执行顺序

页面加载时的完整顺序：

onLoad - 页面加载，接收参数
onShow - 页面显示
beforeCreate - Vue 实例初始化前
created - Vue 实例创建完成
beforeMount - 挂载前
onReady - 页面初次渲染完成
mounted - Vue 实例挂载完成

常用场景建议

export default {onLoad(options) {// ✅ 适合：接收页面参数，根据参数初始化数据this.id = options.idthis.loadData()},onShow() {// ✅ 适合：每次页面显示时刷新数据if (this.needRefresh) {this.refreshData()}},mounted() {// ✅ 适合：DOM 操作，初始化第三方库this.initChart()},created() {// ✅ 适合：数据初始化，但不要操作 DOMthis.initData()},beforeDestroy() {// ✅ 适合：清理工作，清除定时器、取消订阅等clearInterval(this.timer)}
}