Vue 3 中的生命周期函数

在 Vue 3 中，生命周期函数被重构了，有以下8个生命周期函数：

1. `beforeCreate`: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. `created`: 实例已经创建完成之后被调用。在这一步，实例已经完成了数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3. `beforeMount`: 在挂载开始之前被调用，相关的 render 函数首次被调用。
4. `mounted`: 实例挂载之后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
5. `beforeUpdate`: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。该钩子函数在服务器渲染期间不被调用。
6. `updated`: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。
7. `beforeUnmount`: 在实例销毁之前调用。这里主要是进行一些清理工作，例如清除计时器、取消订阅等。
8. `unmounted`: 实例销毁之后调用。此时，所有的事件监听器都已经被移除，所有的子实例也已经被销毁。

相关问题

vue2和vue3中生命周期函数的区别

Vue 3相对于Vue 2，简化了生命周期函数，将其从8个缩减到了6个。下面是Vue 2和Vue 3的生命周期函数的区别：

1. Vue 2中beforeCreate和created生命周期函数表示实例刚刚创建，但是数据还未初始化完成。Vue 3中取消了beforeCreate，新增了setup函数，它在创建组件实例时执行，负责初始化数据和其他一些组件配置。setup函数返回的对象将成为组件实例的响应式状态。

2. Vue 2中，mounted生命周期函数表示组件已挂载到DOM上，可以进行DOM操作。而在Vue 3中，mounted被重命名为onMounted。

3. Vue 2中，updated生命周期函数表示组件的数据发生变化，DOM已经更新。而在Vue 3中，updated被重命名为onUpdated。

4. Vue 2中，beforeDestroy生命周期函数表示组件即将被销毁，可以进行一些清理工作。而在Vue 3中，beforeDestroy被重命名为onBeforeUnmount。

5. Vue 2中，destroyed生命周期函数表示组件已经被销毁，可以进行一些清理工作。而在Vue 3中，destroyed被重命名为onUnmounted。

6. Vue 2中，activated和deactivated生命周期函数在keep-alive组件中使用，表示组件被激活和停用。而在Vue 3中，这两个函数被移除了，可以使用onActivated和onDeactivated代替。

vue3所有生命周期函数

Vue3的生命周期函数与Vue2相比略有不同，以下是Vue3的所有生命周期函数：

1. setup

setup函数是Vue3新增的生命周期函数，在组件创建时执行。它是组件的入口函数，用于初始化组件的数据、计算属性、方法等。与Vue2的beforeCreate和created生命周期函数合并了。

2. beforeMount

beforeMount函数在组件挂载前执行，与Vue2的beforeMount生命周期函数相同。

3. onMounted

onMounted函数在组件挂载后执行，与Vue2的mounted生命周期函数相同。

4. beforeUpdate

beforeUpdate函数在组件更新前执行，与Vue2的beforeUpdate生命周期函数相同。

5. onUpdated

onUpdated函数在组件更新后执行，与Vue2的updated生命周期函数相同。

6. beforeUnmount

beforeUnmount函数在组件卸载前执行，与Vue2的beforeDestroy生命周期函数相同。

7. onUnmounted

onUnmounted函数在组件卸载后执行，与Vue2的destroyed生命周期函数相同。

8. onErrorCaptured

onErrorCaptured函数用于捕获组件内部错误，与Vue2的errorCaptured生命周期函数相同。

总体来说，Vue3的生命周期函数相较于Vue2更加细化和灵活，同时也更加符合函数式编程的思想。