无锡门户网站制作电话首都博物馆 网站建设

一、Vue的生命周期及其阶段

Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

生命周期的四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁 

二、Vue生命周期函数（钩子函数） 

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】—》让开发者可以在【特定阶段】运行自己的代码。

接下来展开讲讲这些生命周期函数：

• beforeCreate（创建前）：实例初始化后立即调用，此时数据观测（data）、事件/监听器（ event /watcher ）尚未设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。

• created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但DOM未挂载，所以不能访问到 $el 属性。

• 用途：适合数据初始化​（如发起异步请求），但不可操作 DOM。

• beforeMount（挂载前）：模板已编译为虚拟 DOM，但尚未渲染到页面。此时 $el 是初始模板（如 {{a}} 未解析）。无法操作渲染后的 DOM 元素。

• 虚拟DOM本质上是一个JavaScript对象，它是对真实DOM的抽象。虚拟DOM通过在内存中创建一个虚拟的DOM树，记录新旧树的差异（diff），然后将这些差异一次性更新到真实的DOM中。这样可以避免频繁的DOM操作，提高渲染效率。

• mounted（挂载后）：实例已挂载到真实 DOM，$el 可访问，页面完成首次渲染。

• 用途：适合DOM 操作​（如初始化第三方库）、异步请求依赖 DOM 的场景。

• beforeUpdate（更新前）：响应式数据更新时调用，数据已更新，但 DOM 尚未重新渲染（页面显示旧数据）。

• updated（更新后） ：虚拟 DOM 重新渲染并更新真实 DOM 后调用。

• 用途：可执行依赖新 DOM 的操作，但需避免在此修改数据（可能导致无限循环）。

• beforeDestroy（销毁前）：实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例，data、methods 可访问。

•  ​用途：执行清理工作​（如移除事件监听、取消定时器）。

• destroyed（销毁后）：实例销毁完成，所有绑定（数据、事件、子组件）已解除。无法再操作实例的属性和方法。

created和mounted的区别

• created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

• mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

三、keep-alive 的生命周期

keep-alive 是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：deactivated、actived。同时，beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁。

• 当组件被换掉时，会被缓存到内存中，触发 deactivated 生命周期
• 当组件被切回来时，再去缓存里找这个组件，触发 activated 钩子函数

四、Vue2 与 Vue3 生命周期的区别

阶段	​Vue 2 钩子函数	​Vue 3 钩子函数（选项式）	​Vue 3 Composition API 函数
​创建前	beforeCreate	beforeCreate（不推荐使用）	由 setup() 替代逻辑
​创建后	created	created（不推荐使用）	由 setup() 替代逻辑
​挂载前	beforeMount	beforeMount	onBeforeMount
​挂载后	mounted	mounted	onMounted
​更新前	beforeUpdate	beforeUpdate	onBeforeUpdate
​更新后	updated	updated	onUpdated
​销毁前	beforeDestroy	beforeUnmount	onBeforeUnmount
​销毁后	destroyed	unmounted	onUnmounted
调试钩子	无	新增 renderTracked、renderTriggered	onRenderTracked、onRenderTriggered

Vue3 的生命周期与 Vue2 的核心区别可概括为：​

1. 钩子函数名称调整（如销毁阶段 beforeDestroy → beforeUnmount）
2. 引入 Composition API 的 setup 替代 beforeCreate/created，并新增调试钩子