目录
文章内容：在Vue框架中，组件的生命周期是一个核心概念。而Vue 2和Vue 3在生命周期方面既有相似之处，也存在一些关键差异。文章将对这两个版本的生命周期进行简要说明，探讨它们之间的差异，以及父子组件生命周期的执行顺序，并解析<keep-alive>组件特有的deactivated和activated生命周期钩子。
1.何为Vue的生命周期
Vue实例从开始创建、初始化数据、模板编译、挂载DOM、渲染更新到销毁等一系列过程，称为Vue的生命周期。每个Vue实例在被创建时都要经过一系列的初始化过程，在这个过程中的一些阶段，vue会调用指定的一些组件方法。
生命周期：API 参考 | Vue.js (vuejs.org)
2.Vue2生命周期阶段
Vue基本生命周期函数有下面几个阶段：创建阶段、挂载阶段、更新阶段、卸载阶段、其他。
（1）beforeCreate(创建前)
实例刚在内存中创建出来，组件实例上的 data、computed、watch、methods 上的方法和数据都还未被初始化，所以它们都无法被访问。
（2）created(创建后)
在实例创建完成后被立即调用。在这一步实例已完成数据，属性和方法的运算，watch/event 事件回调，但是还没有开始编译模板，渲染的节点还未挂载到DOM，所以不能访问到$el属性。
（3）beforeMount(挂载前)
在挂载开始之前被调用，相关的 render 函数首次被调用。模板已经编译完成，但是尚未挂载到 DOM 上，所以$el仍然不可见。
（4）mounted(挂载后)
el 被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子。此时组件的模板已经渲染到了页面上，可以访问 DOM 元素。
（5）beforeUpdate(更新前)
状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点。
（6）updated(更新后)
（7）beforeDestroy(销毁前)
Vue 实例销毁之前调用。在这一步实例仍然完全可用。
（8）destroyed(销毁后)
Vue 实例销毁后调用。调用后Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也都会被销毁。
图片来源vue2官网：生命周期钩子 | Vue.js (vuejs.org)
3.Vue3生命周期阶段
Vue 3 引入了 Composition API，允许以更灵活的方式组织和重用逻辑。可以通过 onXxx 函数来访问它们，其中 Xxx 是生命周期钩子的名称要首字母大写。
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
这些钩子的用途与 Vue 2中的相同。
4.Vue2与Vue3生命周期差异
Vue 3 与 Vue 2 在生命周期方面存在几个显著的不同点。
（1）生命周期钩子函数的命名变化
在 Vue 3 中，钩子函数的名称被修改为以 "on" 为前缀，"onCreated"、"onBeforeMount"、"onMounted"、"onBeforeUpdate"、"onUpdated"、"onBeforeUnmount"、"onUnmounted" 等。
（2）新增的生命周期钩子函数
Vue 3 引入了一些新的生命周期钩子函数，引入了 "onRenderTracked" 和 "onRenderTriggered" 钩子函数，用于跟踪和触发组件的渲染过程，有助于优化渲染性能。
（3）生命周期的触发时机和合并方式
Vue 2：组件的生命周期钩子函数是在组件创建、挂载、更新和销毁等不同阶段被依次触发的，这些钩子函数会按照特定的顺序依次执行。
Vue 3：引入了基于组合式 API 的组件写法，使用新的生命周期函数 "setup" 来配置组件，并且采用了异步更新的机制。在 Vue 3 中，组件的创建和更新是异步执行的，生命周期函数的触发时机也可能发生变化。Vue 3还采用了一种新的生命周期的合并方式，就是将相同阶段的钩子函数合并为一个函数，以提高性能并优化组件运行的顺序。
（4）生命周期的组合式 API
Vue 3 引入了组合式 API，这是一种新的编写组件的方式，允许开发者将组件的逻辑组织成可复用的函数。在组合式 API 中，生命周期钩子函数不再直接挂载在组件选项上，而是通过 onXxx 函数（如 onMounted、onUpdated 等）在 setup 函数内部使用。
（5）移除或更改的钩子函数
Vue 3 移除了 Vue 2 中的 "beforeDestroy" 和 "destroyed" 钩子函数，改为使用 "beforeUnmount" 和 "unmounted" 钩子函数。
5.Vue每个生命周期一般进行什么操作？
beforeCreate(创建前)
不常用，主要用于初始化一些不需要依赖 Vue 实例数据或方法的操作。
created(创建后)
常用于发送异步请求获取数据，进行页面初始化操作等。
beforeMount(挂载前)
可以进行最后一次的数据修改，不会触发重新渲染。
mounted(挂载后)
常用于执行依赖于 DOM 的操作，如使用 jQuery 插件初始化 DOM 元素。
beforeUpdate(更新前)
不常用，因为 Vue 的响应式系统会自动处理 DOM 更新。
updated(更新后)
常用于执行依赖于 DOM 的操作，但要避免更改状态。
beforeDestroy(销毁前)
常用于执行清理工作，如移除事件监听器或定时器。
destroyed(销毁后)
同 beforeDestroy，但此时组件已完全销毁。
4.created和mounted的区别
created在模板渲染成html前调用,即通常初始化某些属性值，然后再渲染成视图。
mounted在模板渲染成html后调用,通常初始化页面完成后,再对html的dom节点进行一些需要的操作。
5.Vue子组件和父组件执行顺序
（1）加载渲染过程
父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted
（2）更新过程
父beforeUpdate-子beforeUpdate-子update-父updated
（3）销毁过程
父beforeDestroy-子beforeDestroy-子destroyed-父destroyed
6.keep-alive的生命周期
<keep-alive>常用于需要保持状态的组件，如列表的滚动位置、表单的输入内容等，在用户频繁切换页面或组件时，能够提供良好的用户体验。
在Vue中，<keep-alive>是一个内置组件，主要用于缓存动态组件，在组件切换的过程中避免重复渲染DOM。<keep-alive>组件本身并不具有自己的生命周期钩子函数，但它会影响被其包裹的组件的生命周期。当组件被<keep-alive>包裹时，该组件会获得两个特殊的生命周期钩子函数：deactivated和activated。
（1）deactivated
当<keep-alive>包裹的组件被换掉时，会被缓存起来，触发deactivated生命周期。
在这个钩子函数中，可以进行一些清理工作，如移除事件监听器、清理定时器等，以避免潜在的内存泄漏。
（2）activated
当被<keep-alive>包裹的组件被切回来时，会在缓存里面找这个组件，触发activated生命周期。
在这个钩子函数中，可以进行一些数据的重新加载或组件状态的恢复，以确保组件在激活时能够展示最新的数据或状态。
例：以组件A和组件B为例，当从组件A切换到组件B时，组件A的deactivated钩子函数会被调用；当从组件B切换回组件A时，如果组件A被<keep-alive>缓存了，activated钩子函数会被调用。
注意：过度使用<keep-alive>可能导致内存消耗过大。
扫一扫
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
