面试vue3必知的八种周期

Vue.js 是一款流行的前端 JavaScript 框架，它提供了一套完整的响应式数据绑定和组件化的开发模式。Vue.js 的生命周期指的是组件实例在创建、更新和销毁过程中所经历的一系列阶段。Vue.js 的生命周期可以分为以下八个阶段：

1. beforeCreate: 在实例被创建之前，这个阶段组件的实例并没有被创建，数据观测和事件均不可用。

2. created: 实例被创建后，可以访问到组件的实例，但 DOM 元素和数据绑定还没有初始化。在这一阶段通常进行一些初始化的工作，例如加载数据等。

3. beforeMount: 在这一阶段，Vue 将编译模板并将其渲染为虚拟 DOM。但是，此时虚拟 DOM 尚未被挂载到组件所在的元素上。

4. mounted: 在这一阶段，Vue 将虚拟 DOM 挂载到组件所在的元素上。此时，组件已经被初始化完毕，可以访问到组件对应的 DOM 元素，并进行 DOM 操作。常用于发送异步请求获取数据、操作 DOM 元素等操作。

5. beforeUpdate: 在组件更新之前，这个阶段会在数据更新之前调用。可以用来在数据更新前执行一些准备工作。注意，避免在这个钩子函数中修改数据，因为此时数据更新尚未应用到视图上。

6. updated: 在组件的数据发生改变后，将会调用此钩子函数。此时，组件已经重新渲染，可以对更新后的 DOM 进行操作。需要注意的是，避免在此钩子函数中修改数据，以防止进入无限循环的更新。

7. beforeDestroy: 在组件销毁之前，此时组件实例仍然完好，可以进行必要的清理工作，例如清除定时器、解绑事件监听器等。

8. destroyed: 组件销毁后，此阶段组件实例被销毁，所有的事件监听器和数据观测都会被移除。此钩子函数可以用于释放组件占用的资源，以及进行一些最后的清理工作。

总结：Vue.js 的生命周期包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 共计八个阶段，每个阶段都提供了相应的钩子函数，可以在不同的阶段执行相应的操作。了解 Vue.js 的生命周期可以帮助开发者更好地理解组件的创建、更新和销毁过程，从而更好地控制组件的行为和实现自定义的逻辑。