vue3生命周期执行顺序

Vue 3的生命周期执行顺序其实很简单，它比Vue 2要简洁得多。在Vue 3中，生命周期钩子主要分为两个阶段：组件的挂载和更新。
1. 先说最重要的，组件在挂载阶段会依次执行setup()、onBeforeMount()、mounted()。setup()是Vue 3中所有组件逻辑的入口，它会在组件实例化之前被调用。onBeforeMount()在setup()之后执行，它是组件挂载到DOM之前调用的，类似于Vue 2的beforeMount。最后，mounted()在组件挂载到DOM之后执行。
2. 另外，当组件需要更新时，会依次执行onBeforeUpdate()和updated()。onBeforeUpdate()在组件数据更新之前调用，而updated()在数据更新并重新渲染后调用。
3. 我一开始也以为Vue 3的生命周期会更复杂，但后来发现不对，Vue 3去掉了Vue 2中的很多生命周期钩子，比如created、beforeDestroy等，因为它们在setup()和onBeforeUnmount()中已经可以替代。
等等，还有个事，Vue 3中新增了onUnmounted()生命周期钩子，它会在组件卸载时调用，相当于Vue 2的beforeDestroy。
最后提醒一个容易踩的坑，就是不要在setup()中直接访问DOM，因为setup()是在组件实例化之前调用的，这时候DOM还没有挂载。

创建实例 -> beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed
实操提醒：记住顺序，避免在错误的生命周期钩子中修改数据或状态。