从Vue2到UniApp Vue3：生命周期函数迁移实战指南

当你准备将现有的UniApp项目从Vue2迁移到Vue3时，生命周期函数的变化可能是最需要关注的环节之一。这不仅涉及语法层面的调整，还需要考虑跨平台兼容性问题，特别是H5和小程序端的差异。本文将带你深入理解这些变化，并提供可立即落地的迁移方案。

1. 理解Vue3生命周期函数的本质变化

Vue3引入的Composition API彻底改变了我们编写组件的方式，生命周期函数也不例外。在Vue2的Options API中，我们习惯这样写：

export default {
  created() {
    console.log('组件实例已创建')
  },
  mounted() {
    console.log('DOM挂载完成')
  }
}

而在Vue3的Composition API中，这些变成了需要显式导入的函数：

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('DOM挂载完成')
    })
  }
}

关键变化点 ：

• beforeCreate 和 created 被 setup() 函数替代
• 所有生命周期函数都需要从'vue'中导入
• 生命周期钩子现在作为函数在 setup() 中调用
• 钩子函数接收回调函数作为参数

提示： setup() 函数在组件创建之前执行，因此在这里无法访问 this ，这也是为什么需要显式导入各种API的原因。

2. UniApp环境下特有的生命周期处理

UniApp作为跨平台框架，其生命周期函数需要特别关注两点：页面生命周期和平台差异。

2.1 页面生命周期的变化

在Vue2的UniApp中，我们可以直接在组件选项中定义页面生命周期：

export default {
  onLoad() {
    console.log('页面加载')
  },
  onShow() {
    console.log('页面显示')
  }
}

在Vue3中，这些函数需要从 @dcloudio/uni-app 导入：

import { onLoad, onShow } from '@dcloudio/uni-app'

export default {
  setup() {
    onLoad(() => {
      console.log('页面加载')
    })
    
    onShow(() => {
      console.log('页面显示')
    })
  }
}

常用UniApp页面生命周期函数对照表 ：

Vue2写法	Vue3写法	说明
onLoad	onLoad	页面加载时触发
onShow	onShow	页面显示时触发
onReady	onReady	页面初次渲染完成
onHide	onHide	页面隐藏时触发
onUnload	onUnload	页面卸载时触发

2.2 平台差异的生命周期函数

某些生命周期函数在不同平台上的支持程度不同，需要特别注意：

import { onUpdated, onActivated } from 'vue'

export default {
  setup() {
    // H5端可用，小程序端无效
    onUpdated(() => {
      console.log('组件已更新')
    })
    
    // 替代方案：使用条件编译
    // #ifdef H5
    onActivated(() => {
      console.log('组件激活')
    })
    // #endif
  }
}

平台差异生命周期函数列表 ：

• onBeforeUpdate (仅H5)
• onUpdated (仅H5)
• onActivated (仅H5)
• onDeactivated (仅H5)

3. 迁移策略与最佳实践

3.1 逐步迁移方案

对于大型项目，推荐采用渐进式迁移策略：

1. 混合模式过渡 ：在Vue3项目中暂时保留Options API写法
2. 组件级迁移 ：按组件逐个迁移到Composition API
3. 生命周期映射 ：建立新旧生命周期对应关系表

生命周期函数对照参考 ：

Vue2选项	Vue3组合式API	说明
beforeCreate	setup()	使用setup替代
created	setup()	使用setup替代
beforeMount	onBeforeMount	需显式导入
mounted	onMounted	需显式导入
beforeUpdate	onBeforeUpdate	小程序不支持
updated	onUpdated	小程序不支持
beforeDestroy	onBeforeUnmount	名称变更
destroyed	onUnmounted	名称变更
activated	onActivated	小程序不支持
deactivated	onDeactivated	小程序不支持

3.2 条件编译处理平台差异

UniApp的条件编译是处理跨平台差异的利器：

import { onMounted, onUpdated } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 所有平台通用的挂载逻辑
      initBaseData()
    })
    
    // #ifdef H5
    onUpdated(() => {
      // 仅H5端执行的更新逻辑
      trackPageUpdate()
    })
    // #endif
    
    // #ifdef MP-WEIXIN
    // 小程序特有的替代方案
    watch(() => data.value, () => {
      console.log('数据变化，模拟updated')
    })
    // #endif
  }
}

3.3 常见问题解决方案

问题1：如何在setup中访问路由参数？

import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

export default {
  setup() {
    const id = ref(null)
    
    onLoad((options) => {
      id.value = options.id
    })
    
    return { id }
  }
}

问题2：多个组件共享生命周期逻辑

可以提取为可组合函数：

// hooks/usePageLifecycle.js
import { onLoad, onShow } from '@dcloudio/uni-app'

export function usePageLifecycle() {
  onLoad(() => {
    console.log('页面加载 - 来自usePageLifecycle')
  })
  
  onShow(() => {
    console.log('页面显示 - 来自usePageLifecycle')
  })
}

// 在组件中使用
import { usePageLifecycle } from '@/hooks/usePageLifecycle'

export default {
  setup() {
    usePageLifecycle()
    // 其他逻辑...
  }
}

4. 性能优化与调试技巧

4.1 生命周期执行顺序分析

理解生命周期执行顺序对调试至关重要：

包含子组件的页面加载顺序 ：

1. 页面 onLoad
2. 页面 onShow
3. 组件 onBeforeMount
4. 页面 onReady
5. 组件 onMounted

4.2 避免常见性能陷阱

• 避免在onMounted中执行阻塞操作 ：这会导致组件挂载延迟
• 合理使用onActivated ：对于keep-alive缓存的组件，可以复用数据而非重新加载
• 及时清理副作用 ：在onUnmounted中取消事件监听、定时器等

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    let timer = null
    
    onMounted(() => {
      timer = setInterval(() => {
        console.log('每秒钟执行')
      }, 1000)
    })
    
    onUnmounted(() => {
      clearInterval(timer)
    })
  }
}

4.3 调试工具的使用

Vue DevTools对Composition API提供了良好支持：

1. 可以查看setup()中定义的反应式数据
2. 跟踪生命周期钩子的触发顺序
3. 检查组件卸载时的资源清理情况

对于UniApp特有的生命周期，可以在控制台添加日志标记：

import { onLoad, onShow } from '@dcloudio/uni-app'

export default {
  setup() {
    onLoad(() => {
      console.log('[生命周期] 页面加载')
    })
    
    onShow(() => {
      console.log('[生命周期] 页面显示')
    })
  }
}

迁移到Vue3的UniApp项目虽然需要适应新的生命周期写法，但Composition API带来的代码组织优势会在项目复杂度增加时显现出来。特别是在处理跨平台差异时，条件编译与组合式函数的结合可以提供更清晰的代码结构。