Vue 组件生命周期函数解析

Vue 组件生命周期函数解析

在 Vue 开发中，理解组件的生命周期至关重要。这些钩子函数允许我们在组件的不同阶段执行特定逻辑，比如初始化数据、操作 DOM 或清理资源。

核心阶段概览

一个组件从创建到销毁，主要经历四个阶段：创建期、渲染期、更新期和销毁期。每个阶段都有对应的钩子函数可供调用。

<template>
  <div>
    <h3>组件的生命周期函数演示</h3>
    <p>{{ message }}</p>
    <button @click="updateHandle">修改文本内容</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "组件原始数据"
    };
  },
  methods: {
    updateHandle() {
      this.message = "修改完成后的文本信息";
    }
  },
  // 创建期
  beforeCreate() {
    console.log("组件实例创建之前");
  },
  created() {
    console.log("组件实例已创建");
  },
  // 渲染期
  beforeMount() {
    console.log("DOM 挂载之前");
  },
  mounted() {
    console.log("DOM 挂载完成");
  },
  // 更新期
  beforeUpdate() {
    console.log("数据更新前");
  },
  updated() {
    console.log("数据更新后");
  },
  // 销毁期
  beforeUnmount() {
    console.log("组件销毁前");
  },
  unmounted() {
    console.log("组件已销毁");
  }
};
</script>

运行时的行为观察

当你初次加载页面时，控制台会依次打印出'创建'和'挂载'相关的日志。这是因为此时组件完成了初始化并渲染到了页面上。

点击按钮触发数据变更时，你会注意到只有更新阶段的两个钩子被触发：beforeUpdate 和 updated。这符合预期——数据变了，但 DOM 还没重新渲染，所以先执行 beforeUpdate；等 DOM 更新完毕，再执行 updated。

这种机制让我们能精准控制何时读取最新数据，或者何时执行副作用操作（如发送请求、重置表单）。在实际项目中，created 常用于发起异步请求，而 mounted 则适合操作 DOM 元素。

注意事项

虽然代码示例使用了 Vue 2 的选项式 API，但在 Vue 3 的组合式 API 中，对应关系依然保持，只是写法有所不同。理解这些底层逻辑有助于你更好地调试组件状态问题。