【转】[Vue] Vue 的生命周期钩子 和内置方法介绍

转自：kimi.ai

Vue 的生命周期钩子和内置方法是 Vue.js 框架的核心特性，它们帮助开发者在组件的不同阶段执行代码，以及操作 Vue 实例或组件。以下是详细的介绍：

---

1. Vue 生命周期钩子

Vue 组件的生命周期可以分为几个阶段：创建、挂载、更新和销毁。每个阶段都有对应的生命周期钩子，允许开发者在这些特定时刻执行代码。

1.1 创建阶段

• beforeCreate
  • 触发时机：在实例初始化之后，数据观测(data observer)和事件配置之前被调用。
  • 应用场景：此时 data 和 methods 还未初始化，通常用于调试或初始化一些不依赖于 data 的变量。
  • 示例：
    JavaScript复制

    beforeCreate() {
      console.log("beforeCreate: data 和 methods 还未初始化");
      console.log(this.message); // undefined
    }

• created
  • 触发时机：实例创建完成后被调用，此时实例已完成数据观测、属性和方法的绑定，但尚未挂载到 DOM。
  • 应用场景：适合进行数据初始化、调用 API 获取数据等操作。
  • 示例：
    JavaScript复制

    created() {
      console.log("created: data 和 methods 已初始化");
      console.log(this.message); // 输出初始化的 message
      this.fetchData(); // 假设 fetchData 是一个方法，用于获取数据
    }

1.2 挂载阶段

• beforeMount
  • 触发时机：在挂载开始之前被调用，相关的 render 函数首次被调用。
  • 应用场景：此时可以访问到 el，但 DOM 还未渲染，适合在渲染前进行一些 DOM 操作。
  • 示例：
    JavaScript复制

    beforeMount() {
      console.log("beforeMount: DOM 还未渲染");
      console.log(this.$el); // 可以访问到 el，但 DOM 还未渲染
    }

• mounted
  • 触发时机：实例挂载完成后被调用，此时 el 被新创建的 vm.$el 替换，且 DOM 已渲染。
  • 应用场景：适合执行依赖于 DOM 的操作，如初始化第三方插件（如 jQuery 插件）。
  • 示例：
    JavaScript复制

    mounted() {
      console.log("mounted: DOM 已渲染");
      console.log(this.$el); // DOM 已渲染
      this.$el.querySelector("button").addEventListener("click", this.handleClick);
    }

1.3 更新阶段

• beforeUpdate
  • 触发时机：数据更新时调用，发生在虚拟 DOM 打补丁之前。
  • 应用场景：适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
  • 示例：
    JavaScript复制

    beforeUpdate() {
      console.log("beforeUpdate: 数据已更新，但 DOM 还未更新");
    }

• updated
  • 触发时机：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后被调用。
  • 应用场景：适合在 DOM 更新后执行操作，但需注意避免在此阶段更改状态，否则可能导致额外的重渲染。
  • 示例：
    JavaScript复制

    updated() {
      console.log("updated: DOM 已更新");
    }

1.4 销毁阶段

• beforeDestroy（Vue 2.x）/ beforeUnmount（Vue 3.x）
  • 触发时机：实例销毁之前被调用。在这一步，实例仍然完全可用。
  • 应用场景：适合清理资源，如移除事件监听器、取消定时器等。
  • 示例：
    JavaScript复制

    beforeDestroy() {
      console.log("beforeDestroy: 实例即将销毁");
      window.removeEventListener("resize", this.handleResize);
    }

• destroyed（Vue 2.x）/ unmounted（Vue 3.x）
  • 触发时机：实例销毁后被调用。此时，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。
  • 应用场景：通常用于调试，确认组件已完全销毁。
  • 示例：
    JavaScript复制

    destroyed() {
      console.log("destroyed: 实例已销毁");
    }

---

2. Vue 内置方法

Vue 提供了许多内置方法，用于操作 Vue 实例或组件。以下是一些常用的内置方法：

2.1 实例方法

• this.$set
  • 用途：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
  • 示例：
    JavaScript复制

    data() {
      return {
        user: {
          name: "Kimi"
        }
      };
    },
    methods: {
      addUserAge() {
        this.$set(this.user, "age", 25); // 添加响应式属性
      }
    }

• this.$delete
  • 用途：删除对象的属性，并确保触发视图更新。
  • 示例：
    JavaScript复制

    methods: {
      removeUserAge() {
        this.$delete(this.user, "age"); // 删除响应式属性
      }
    }

• this.$watch
  • 用途：观察 Vue 实例上的数据，并在数据变化时做出反应。
  • 示例：
    JavaScript复制

    created() {
      this.$watch("message", (newVal, oldVal) => {
        console.log(`message 从 ${oldVal} 变为 ${newVal}`);
      });
    }

• this.$nextTick
  • 用途：在 DOM 更新完成后执行延迟回调。
  • 示例：
    JavaScript复制

    methods: {
      updateMessage() {
        this.message = "Hello Vue!";
        this.$nextTick(() => {
          console.log(this.$el.textContent); // DOM 更新后的内容
        });
      }
    }

2.2 全局方法

• Vue.extend
  • 用途：用于创建组件构造器。
  • 示例：
    JavaScript复制

    const MyComponent = Vue.extend({
      template: "<div>Hello Vue!</div>"
    });

• Vue.nextTick
  • 用途：在 DOM 更新完成后执行延迟回调。
  • 示例：
    JavaScript复制

    Vue.nextTick(() => {
      console.log("DOM 更新完成");
    });

---

3. 总结

• 生命周期钩子：帮助开发者在组件的创建、挂载、更新和销毁阶段执行代码，适合进行初始化、DOM 操作、清理资源等操作。
• 内置方法：提供了操作 Vue 实例或组件的工具，如 $set、$delete、$watch 和 $nextTick 等，帮助开发者实现更复杂的逻辑。

这些生命周期钩子和内置方法是 Vue.js 的强大特性，合理使用它们可以让你的 Vue 应用更加高效和灵活。