Vue 3 setup 生命周期函数详解及运行顺序

在 Vue 3 中，组件的生命周期函数有所改变。以下是 Vue 3 中的组件生命周期函数的运行顺序：

1. 'beforeCreate': 在实例被创建之前调用，此时组件的数据还没有被初始化，无法访问到组件的 'props'、'data' 等属性。

2. 'created': 在实例创建完成后调用，此时组件的数据已经初始化，可以访问到组件的 'props'、'data' 等属性。

3. 'beforeMount': 在组件挂载到 DOM 之前调用。

4. 'mounted': 在组件挂载到 DOM 之后调用。

5. 'beforeUpdate': 在组件更新之前调用，发生在数据更新之后，但是 DOM 还没有被重新渲染。

6. 'updated': 在组件更新之后调用，此时数据已经更新完毕，DOM 也重新渲染完成。

7. 'beforeUnmount': 在组件卸载之前调用。

8. 'unmounted': 在组件卸载之后调用。

在 Vue 3 中，新增了两个生命周期函数：

1. 'beforeUnmount': 在组件卸载之前调用，用于执行一些清理工作，比如清除定时器、取消订阅等。

2. 'unmounted': 在组件卸载之后调用，用于执行一些最后的清理工作。

需要注意的是，Vue 3 中的生命周期函数命名发生了变化，'beforeCreate' 和 'created' 保持不变，其余生命周期函数的命名都加了前缀 "before" 或 "un"。