VUE3生命周期钩子

生命周期

vue2的生命周期钩子

• beforeCreate：开始初始化事件和生命周期，但还没有data、methods、computed、watch属性，也就是vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
  created：实完成数据挂载、事件绑定等；vue实例的数据对象data有了，dom树还未挂载。
  载入前
• beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用，即编译模板准备渲染。
• mounted：完成实例挂载，数据完成双向绑定；实际的DOM元素可用。
• beforeUpdate：组件数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步地更改状态，不会触发重新渲染。
• updated：将data中的值更新到页面中；此时，组件 DOM 已经更新，绝对不要在这里再更新data。
• beforeDestroy：在实例销毁之前调用。这一步，实例仍然是完全正常的。
• destroyed：销毁后解绑所有东西；清除watcher、监听器、子组件实例等。

vue3的生命周期钩子

• setup: 用于初始化组件数据和方法。它是组件实例化的早期阶段，在 beforeCreate 和 created 之间调用。
• onBeforeMount: 在组件被挂载之前被调用；
• onMounted: 相当于 Vue 2 的 mounted，在组件初次渲染完毕并创建DOM节点（以及所有同步的子组件都已挂载完，不含异步组件）之后被调用；
• onBeforeUpdate: 在数据变化（响应式状态变更）时更新DOM树之前调用；
• onUpdated:在数据变化（响应式状态变更）时更新DOM树之后调用；
• onBeforeUnmount: 相当于 Vue 2 的 beforeDestroy，在组件实例被卸载之前调用；
• onUnmounted: 相当于 Vue 2 的 destroyed，通常在这个钩子里处理一些副作用，例如计时器、DOM监听、与服务器的连接等。
• onErrorCaptured: 捕获组件或子组件树中的错误，类似于 Vue 2 的 errorCaptured。
• onRenderTracked：注册一个调试钩子，仅在开发模式下有效，当组件渲染过程中追踪到响应式依赖时调用。
• onRenderTriggered：注册一个调试钩子，仅在开发模式下有效，当响应式依赖的变更触发了组件渲染时调用。
• onActivated：如果组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。这个钩子在服务器端渲染期间不会被调用。
• onDeactivated：如果组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。这个钩子在服务器端渲染期间不会被调用。
• onServerPrefetch：异步函数，在组件实例在服务器上被渲染之前调用。

一、为什么vue3中没有 beforeCreated、created ？
vue3中并没有去掉 beforeCreated、created钩子，只是用 setup函数来代替created来初始化 data、methods、computed。也就是说在setup中，等同于组件实例的创建过程，因此可以将 setup理解为 beforeCreated、created 钩子。

二、为什么vue3的组合式API 更倾向使用 onMouted？
主要原因是可读性和可维护性。在组合式 API 中，可以将相关逻辑分组，并且更清晰地表达每块逻辑的依赖关系。虽然可以在setup 中直接执行异步操作来替代created 钩子的功能，但是使用onMounted来加载数据，确保只在 DOM 渲染之后加载，有助于避免出现和 DOM 操作相关的错误。