前言系列首发于公众号《前端进阶圈》。更多精彩内容，敬请关注公众号的最新消息。Vue2生命周期？分类：Vue生命周期分为8个阶段：创建前后、加载前后、更新前后、销毁前后挂载在实例上beforeUpdate组件数据变化，更新之前更新组件数据updatedbeforeDestroy组件实例在销毁组件实例销毁之前销毁/processbeforeCreate->created:initializeVueinstancecreated:可以调用methods中的方法访问和修改data中的数据触发响应式渲染dom可以调用computed和watch方法。但是vm.$el还没有创建。create->beforeMount：判断el是否存在，不存在则停止编译，直接调用vm.$mount(el)继续编译。编译优先级：render->template->outerHTMLbeforeMount：可以得到vm.el已经完成DOM初始化，但是DOM还没有挂载。BeforeMount->mounted:vm.el已经挂载，vm.$el生成的DOM已被替换el上对应的DOM已挂载：vm.el已经完成DOM的挂载和渲染beforeUpdate:视图层已经没有被更新。如果在beforeUpdate中修改了数据，则不会触发current方法。updated：视图层的更新完成如果在updated修改数据会再次触发update方法(beforeUpdate,updated)beforeDestroy：在Vue实例销毁之前调用，实例的属性和方法仍然可以访问此时。bestroyed：销毁Vue实例并不会清除DOM，只是破坏Vue实例的生命周期Vue3？生命周期函数生命周期描述onBeforeMount组件挂载前onMounted组件挂载后onBeforeUpdate组件更新前onUpdated组件更新后onBeforeUnmount组件实例卸载前onUnmounted组件实例卸载后onErrorCaptured捕获后代组件错误onRenderTrackedDevOnly：组件渲染仅在开发模式下可用onRenderTriggered调试钩子在过程中追求响应式依赖时被调用。onActivated组件实例在依赖触发组件渲染时被调用。它是缓存树的一部分。当组件被插入DOM时，onDeactivated组件实例被调用。缓存树组件从DOM中移除时调用onServerPrefetch异步方法的一部分，SSR服务器在函数/进程之前渲染onMounted()：注册一个回调函数，在组件挂载后执行。functiononMounted(callback:()=>void):void//演示：通过模板引用访问元素：onUpdated()：注册一个回调函数，当组件因为响应式发生变化时state相反，它在更新其DOM树之后被调用。父组件的更新钩子将在其子组件的更新钩子之后被调用。functiononUpdated(callback:()=>void):void//demo:访问更新的DOM{{count}}onUnmounted()：注册一个回调函数，在组件实例卸载后调用。functiononUnmounted(callback:()=>void):void//demoonBeforeMount()：注册一个钩子，在组件挂载前调用。调用此钩子时，组件已完成设置其反应状态，但尚未创建DOM节点。它即将执行第一次DOM渲染过程。functiononBeforeMount(callback:()=>void):voidonBeforeUpdate()：注册一个钩子，在组件由于反应状态变化而更新其DOM树之前调用。这个钩子可以用来在Vue更新DOM之前访问DOM状态。在此钩子内更改状态也是安全的。functiononBeforeUpdate(callback:()=>void):voidonBeforeUnmount()：注册一个钩子，在卸载组件实例之前调用。当这个钩子被调用时，组件实例仍然保留完整的功能。functiononBeforeUnmount(callback:()=>void):voidonErrorCaptured():注册一个钩子，当捕获到后代组件传递的错误时调用该钩子。可以从几个来源捕获错误：组件渲染事件处理程序生命周期钩子setup()函数侦听器自定义指令钩子转换钩子这个钩子有三个参数：错误对象，触发错误的组件实例，以及描述类型的信息字符串错误来源。您可以在errorCaptured()中更改组件状态以向用户显示错误状态。注意不要让错误状态再次渲染导致错误的内容，否则组件会陷入死循环。这个钩子可以返回false以防止错误向上传递voidonRenderTracked()：仅限开发人员。注册一个调试挂钩，当在组件渲染期间跟踪反应依赖项时调用该挂钩。该钩子仅在开发模式下可用，在服务器端渲染时不会被调用。functiononRenderTracked(callback:DebuggerHook):voidtypeDebuggerHook=(e:DebuggerEvent)=>voidtypeDebuggerEvent={effect:ReactiveEffecttarget:objecttype:TrackOpTypes/*'get'|'有'|'iterate'*/key:any}onRenderTriggered()：注册一个调试钩子，当反应性依赖项更改触发组件渲染时调用该钩子。该钩子仅在开发模式下可用，在服务器端渲染时不会被调用。函数onRenderTriggered(回调：DebuggerHook):voidtypeDebuggerHook=(e:DebuggerEvent)=>voidtypeDebuggerEvent={effect:ReactiveEffecttarget:objecttype:TriggerOpTypes/*'set'|'添加'|'删除'|'clear'*/key:anynewValue?:anyoldValue?:anyoldTarget?:Map|Set}onActivated()：注册一个回调函数，如果组件实例是缓存树的一部分，当组件被插入DOM传输时。functiononActivated(callback:()=>void):voidonDeactivated()：如果组件实例是缓存树的一部分，则注册一个回调函数，当组件从DOM中移除时调用该回调函数。functiononDeactivated(callback:()=>void):voidonServerPrefetch()：注册一个异步函数，在组件实例呈现在服务器上之前被调用。functiononServerPrefetch(callback:()=>Promise):void//demoarticlespecialcharactersDescription:questionmarkQ：（问题）答案标记R：（结果）注释标准：A：（注意事项）详细描述标记：D：（详细信息）摘要标记：S：（摘要）分析标记：Ana：（分析）提示标签：T：（tips）往期回顾：热门面试题：浏览器和Node的宏任务和微任务？这就是你理解的CSS选择器权重吗？面试热点：JS中call、apply、bind的概念、用法、区别和实现是什么？热门面试题：常见的位运算有哪些？Vue数据监控Object.definedProperty()方法的实现面试热点问题：VirtualDOM相关问题？面试热点问题：Array中的无损方法有哪些？面试热点：协商缓存和强缓存的理解和区别？最后：欢迎关注“前端进阶圈”公众号，一起探索和学习前端技术...公众号回复加群或扫码，即可加入前端交流学习群，一起钓鱼，一起学习。.....公众号回复加好友，即可加为好友
