在 UniApp 中，
Vue2 和
Vue3 的
生命周期钩子函数存在一定的差异。
Vue3 的
生命周期钩子函数与
Vue2 相比有所变化，主要是为了更好地支持组合式 API 和更清晰的
生命周期管理。
###
Vue2
生命周期钩子函数
在
Vue2 中，
生命周期钩子函数主要包括以下几个阶段：
- `beforeCreate`：实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- `created`：实例已经创建完成，属性已经绑定，但 DOM 还未生成。
- `beforeMount`：挂载开始之前被调用。
- `mounted`：DOM 已经挂载完毕。
- `beforeUpdate`：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
- `updated`：数据更新后，DOM 已经更新。
- `beforeDestroy`：实例销毁之前调用。
- `destroyed`：实例销毁后调用。
###
Vue3
生命周期钩子函数
Vue3 的
生命周期钩子函数主要变化在于引入了组合式 API，并且钩子函数名称有所更改，以更好地反映其作用：
- `onBeforeMount`：与
Vue2 的 `beforeMount` 类似。
- `onMounted`：与
Vue2 的 `mounted` 类似。
- `onBeforeUpdate`：与
Vue2 的 `beforeUpdate` 类似。
- `onUpdated`：与
Vue2 的 `updated` 类似。
- `onBeforeUnmount`：与
Vue2 的 `beforeDestroy` 类似。
- `onUnmounted`：与
Vue2 的 `destroyed` 类似。
### UniApp 中的页面
生命周期
在 UniApp 中，页面的
生命周期还包括一些特定的方法，如 `onLoad` 和 `onShow`，这些方法需要从 `@dcloudio/uni-app` 模块中引入并使用[^2]。
###
Vue2 到
Vue3 的迁移
在从
Vue2 迁移到
Vue3 的过程中，需要注意一些语法上的变化，例如 `slot="xxx"` 的用法不再支持，应使用 `v-slot:xxx` 代替[^3]。
### 示例代码
####
Vue2 示例
```
vue
<template>
<div>
<uni-nav-bar>
<view slot="left" class="city">
<!-- ... -->
</view>
</uni-nav-bar>
</div>
</template>
<script>
export default {
beforeCreate() {
console.log('
Vue2 beforeCreate');
},
created() {
console.log('
Vue2 created');
},
beforeMount() {
console.log('
Vue2 beforeMount');
},
mounted() {
console.log('
Vue2 mounted');
}
};
</script>
```
####
Vue3 示例
```
vue
<template>
<div>
<uni-nav-bar>
<template v-slot:left>
<view class="city">
<!-- ... -->
</view>
</template>
</uni-nav-bar>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted } from '
vue';
onBeforeMount(() => {
console.log('
Vue3 onBeforeMount');
});
onMounted(() => {
console.log('
Vue3 onMounted');
});
</script>
```
### 总结
Vue3 的
生命周期钩子函数与
Vue2 相比更加简洁明了，同时也更好地支持了组合式 API。在 UniApp 中，页面的
生命周期还包括一些特定的方法，如 `onLoad` 和 `onShow`，这些方法需要从 `@dcloudio/uni-app` 模块中引入并使用。
1.new Vue():new 了一个vue的实例，此时会进入组件的创建状态；
扫一扫
5052
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
