Vue生命周期速查之Vue2和Vue3钩子全解析

Vue生命周期，本质是Vue实例从创建到销毁的完整过程，每个阶段都会触发对应的钩子函数（生命周期钩子），开发者可通过这些钩子，在不同时机执行所需逻辑（如初始化数据、操作DOM、清理资源等）。核心分为「创建、挂载、更新、销毁」四大阶段，Vue2与Vue3的生命周期整体逻辑一致，但钩子名称、使用方式有差异，以下分版本详细解析，兼顾理论与实操，让新手也能快速上手、高效运用。

一、先明确核心：生命周期四大阶段

无论Vue2还是Vue3，生命周期都围绕「实例从生到死」展开，四大核心阶段不可逆，每个阶段的钩子函数只执行一次（更新阶段除外，可多次触发）：

1. 创建阶段：实例从无到有，初始化数据、配置，未挂载DOM；
2. 挂载阶段：实例挂载到DOM树上，生成真实DOM，可开始操作DOM；
3. 更新阶段：响应式数据发生变化，触发DOM重新渲染，可多次执行；
4. 销毁阶段：实例被销毁，清理资源，避免内存泄漏。

二、Vue2 生命周期（选项式API，最常用）

Vue2使用选项式API，生命周期钩子共8个，按执行顺序排列，无需额外导入，直接写在组件选项中即可使用，每个钩子的作用清晰，适配日常开发场景。

1. 创建阶段（实例初始化，未挂载DOM）

核心：初始化实例、数据观测，此时DOM尚未生成，无法操作DOM。

• beforeCreate（创建前） ：实例刚被创建，data、methods、computed等尚未初始化，无法访问this.data、this.methods，几乎不用（仅特殊场景初始化非响应式数据）。
• created（创建后） ：实例创建完成，data、methods、computed已初始化，可访问响应式数据，但DOM未挂载（$el为undefined），常用场景：发起初始化接口请求、初始化数据处理。

2. 挂载阶段（实例挂载到DOM，可操作DOM）

核心：将实例渲染到页面，生成真实DOM，此时可正常操作DOM。

• beforeMount（挂载前） ：模板已编译完成，但尚未挂载到DOM树上，$el已存在（虚拟DOM），但真实DOM未生成，仍无法操作真实DOM。
• mounted（挂载后） ：实例已完全挂载到DOM树上，真实DOM已生成，可正常操作DOM（如获取DOM元素、初始化第三方插件），是最常用的钩子之一。

3. 更新阶段（响应式数据变化，可多次触发）

核心：当data中的响应式数据发生变化时，触发该阶段，仅更新变化的部分，无需重新渲染整个页面。

• beforeUpdate（更新前） ：响应式数据已变化，但DOM尚未重新渲染，可获取变化前的DOM状态，常用场景：更新前保存DOM原有状态。
• updated（更新后） ：DOM已根据变化后的响应式数据重新渲染，可获取更新后的DOM状态，注意：避免在该钩子中修改响应式数据（会导致无限循环更新）。

4. 销毁阶段（实例销毁，清理资源）

核心：实例被销毁（如组件卸载），需清理资源，避免内存泄漏。

• beforeDestroy（销毁前） ：实例即将被销毁，仍可访问实例的所有属性和方法，常用场景：清理资源（清除定时器、取消接口请求、解绑事件监听）。
• destroyed（销毁后） ：实例已完全销毁，所有属性、方法、事件监听均被解绑，DOM仍存在（需手动清理），几乎不用（清理工作优先在beforeDestroy中完成）。

Vue2 生命周期执行顺序（必记）

beforeCreate → created → beforeMount → mounted → （数据变化）beforeUpdate → updated → （实例销毁）beforeDestroy → destroyed

三、Vue3 生命周期（选项式+组合式API，推荐）

Vue3兼容Vue2的选项式API（生命周期用法与Vue2一致），但更推荐使用组合式API（setup语法糖），组合式API的生命周期钩子需手动导入，名称以“on”开头，核心逻辑与Vue2完全一致，只是使用方式更灵活、轻量化。

1. Vue3 选项式API（与Vue2兼容）

用法和Vue2完全一致，仅替换2个钩子名称（语义更准确），其余钩子功能、执行顺序完全相同：

• 用beforeUnmount 替代 Vue2 的 beforeDestroy；
• 用unmounted 替代 Vue2 的 destroyed。

<script>
export default {
  data() {
    return { count: 0 }
  },
  beforeCreate() { /* 实例创建前 */ },
  created() { /* 实例创建后 */ },
  beforeMount() { /* 挂载前 */ },
  mounted() { /* 挂载后 */ },
  beforeUpdate() { /* 更新前 */ },
  updated() { /* 更新后 */ },
  beforeUnmount() { /* 卸载前（替代beforeDestroy） */ },
  unmounted() { /* 卸载后（替代destroyed） */ }
}
</script>

2. Vue3 组合式API（setup语法糖，推荐）

组合式API的生命周期钩子需从vue中导入，名称以“on”开头，与Vue2的钩子一一对应，函数式调用，更贴合组合式开发逻辑，常用钩子如下（按执行顺序）：

• onBeforeMount：对应Vue2的beforeMount，挂载前执行；
• onMounted：对应Vue2的mounted，挂载后执行（最常用）；
• onBeforeUpdate：对应Vue2的beforeUpdate，更新前执行；
• onUpdated：对应Vue2的updated，更新后执行；
• onBeforeUnmount：对应Vue2的beforeDestroy，卸载前执行（最常用，清理资源）；
• onUnmounted：对应Vue2的destroyed，卸载后执行。

补充：Vue3新增2个调试用钩子（onRenderTracked、onRenderTriggered），日常开发几乎不用，仅用于调试响应式数据的渲染跟踪。

Vue3 组合式API 实操示例（setup语法糖）

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const count = ref(0)
let timer = null

// 挂载后：初始化定时器（常用场景）
onMounted(() => {
  timer = setInterval(() => {
    count.value++
  }, 1000)
})

// 卸载前：清理定时器（避免内存泄漏，常用场景）
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

四、Vue2与Vue3生命周期核心差异（重点）

五、生命周期实操注意事项

• 操作DOM的时机：仅能在mounted（Vue2/Vue3）、updated（Vue2/Vue3）中操作真实DOM，beforeMount、beforeUpdate中无法操作（未生成/未更新）。
• 避免内存泄漏：定时器、事件监听、第三方插件实例，必须在beforeDestroy（Vue2）/onBeforeUnmount（Vue3）中清理，否则会导致内存泄漏。
• 接口请求时机：初始化请求可在created（Vue2）/setup中（Vue3）、mounted中发起；created中发起请求更早，但无法操作DOM；mounted中发起可结合DOM操作。
• 组件复用：每个组件实例的生命周期独立执行，互不影响，比如多个相同组件，各自的钩子函数分别触发。

六、总结（一句话记牢）

Vue生命周期就是“实例从创建到销毁”的全过程，核心是四大阶段+对应钩子，Vue2侧重选项式、兼容旧项目，Vue3兼容选项式、推荐组合式，记住“挂载后操作DOM、销毁前清理资源”，就能覆盖90%的开发场景，新手也能快速上手。

到此这篇关于Vue生命周期速查之Vue2和Vue3钩子全解析的文章就介绍到这了,更多相关Vue生命周期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论