vue.js 2.x生命周期函数

admin 2026年02月19日 17:38 102 0

Vue 2.x生命周期函数贯穿实例创建到销毁全过程，分为创建、挂载、更新、销毁等阶段，创建阶段有beforeCreate（初始化前）和created（创建完成，可访问数据）；挂载阶段beforeMount（编译前）和mounted（挂载完成，适合DOM操作）；更新阶段beforeUpdate（数据变化前）和updated（更新后）；销毁阶段beforeDestroy（销毁前清理）和destroyed（销毁完成），父子组件生命周期存在先后顺序，keep-alive组件还会触发activated/deactivated，合理使用钩子可精确控制各阶段逻辑。

Vue.js 2.x 生命周期函数全解析：从创建到销毁的完整流程与实战应用

在 Vue.js 开发中，生命周期函数（也称生命周期钩子）是理解组件运行机制的核心，它们允许开发者在组件的不同阶段（如创建、挂载、更新、销毁等）插入自定义逻辑，从而精准控制组件的行为，Vue 2.x 的生命周期函数经过多年实践，形成了清晰、完整的流程体系，掌握它们不仅能提升代码的可维护性，还能避免常见的开发陷阱，本文将详细解析 Vue 2.x 的生命周期函数，包括其执行顺序、作用场景及实战技巧。

什么是 Vue 2.x 生命周期函数？

Vue 的生命周期函数是 Vue 实例从创建到销毁的整个过程中，在特定时间点自动调用的函数，每个生命周期函数都对应组件的一个“状态节点”，开发者可以在这些节点中执行初始化数据、操作 DOM、发起网络请求、清理资源等操作。

Vue 2.x 的生命周期流程可分为 4 个主要阶段：

创建阶段：实例被创建，完成数据观测和配置初始化；
挂载阶段：实例被挂载到真实 DOM，完成模板渲染；
更新阶段：数据变化时，虚拟 DOM 重新渲染和 patch；
销毁阶段：实例被销毁，移除监听事件和子实例。

Vue 2.x 生命周期函数详解（按执行顺序）

以下是 Vue 2.x 完整的生命周期函数列表，按从创建到销毁的顺序排列，并附上每个钩子的作用、执行时机及常见场景。

`beforeCreate`

执行时机：实例刚在内存中被创建，数据观测（data observer）和配置（props/methods/computed 等）尚未初始化。
作用：此时无法访问 data、props、methods、computed 等配置项，常用于插件开发中初始化全局逻辑（如注册全局事件）。
注意事项：开发中较少直接使用，因可操作的范围有限。

`created`

执行时机：实例创建完成，数据观测、属性、方法等都已配置，但尚未挂载到 DOM（$el 属性为 undefined）。
作用：
- 初始化数据（如从本地存储读取数据）；
- 发起异步请求（如 API 调用，此时可安全访问 data 和 methods）；
- 添加定时器或事件监听（需在 beforeDestroy 中清理）。

实战场景：

export default {  
  data() {  
    return { userInfo: null };  
  },  
  created() {  
    // 发起请求获取用户信息  
    axios.get('/api/user').then(res => {  
      this.userInfo = res.data;  
    });  
  }  
}

`beforeMount`

执行时机：模板编译完成，即将渲染为真实 DOM，但 $el 仍是虚拟 DOM（可通过 this.$el 访问，但内容未渲染到页面）。
作用：可以修改模板（如通过 this.$options.renderFn 动态渲染），但实际开发中很少使用。
注意事项：此时无法操作真实 DOM（如 document.querySelector 会报错）。

`mounted`

执行时机：实例挂载到真实 DOM 完成，页面已渲染出组件内容（$el 是真实 DOM 节点）。
作用：
- 操作 DOM（如获取 DOM 元素尺寸、位置）；
- 集成第三方库（如 ECharts、Swiper，需依赖真实 DOM）；
- 处理需要 DOM 渲染完成后的逻辑（如滚动事件监听）。

实战场景：

export default {  
  mounted() {  
    // 获取 DOM 元素并添加事件  
    this.$refs.myBtn.addEventListener('click', this.handleClick);  
  },  
  methods: {  
    handleClick() {  
      console.log('按钮被点击');  
    }  
  }  
}

`beforeUpdate`

执行时机：数据发生变化，虚拟 DOM 重新渲染和 patch 之前（DOM 尚未更新）。
作用：可以获取更新前的 DOM 状态（如对比更新前后的数据差异）。
注意事项：避免在此钩子中修改数据，可能导致无限循环（如 this.data = newData 会再次触发 beforeUpdate）。

`updated`

执行时机：数据更新完成，虚拟 DOM 已重新渲染并 patch 到真实 DOM已同步更新）。
作用：处理数据更新后的逻辑（如根据新数据重新计算布局、发起二次请求）。
注意事项：同样避免在此钩子中修改数据，否则可能陷入“更新-修改-更新”的无限循环。

`beforeDestroy`

执行时机：实例即将被销毁，所有事件监听、子实例、定时器等尚未清理。
作用：清理资源，防止内存泄漏：
- 清除定时器（clearInterval、clearTimeout）；
- 解绑事件监听（removeEventListener）；
- 取消未完成的异步请求（如 Axios 的 CancelToken）。

实战场景：

export default {  
  data() {  
    return { timer: null };  
  },  
  mounted() {  
    this.timer = setInterval(() => {  
      console.log('定时器执行');  
    }, 1000);  
  },  
  beforeDestroy() {  
    // 清理定时器，避免内存泄漏  
    clearInterval(this.timer);  
  }  
}

`destroyed`

执行时机：实例被销毁完成，所有绑定的事件监听、子实例、自定义指令等都被移除。
**作用

标签： #js #2.x #生命周期 #函数