Vue生命周期总结_vue离开页面生命周期-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_76428778/article/details/146071477

Vue生命周期总结

Vue的生命周期是指Vue实例（vm对象）从创建到销毁的整个过程。在这个过程中，Vue会在不同的时间节点自动调用一些特定的函数，这些函数被称为生命周期钩子。开发者可以通过在这些钩子中编写代码，来实现特定的功能。

1. Vue生命周期的四个阶段和八个钩子

Vue的生命周期可以划分为四个阶段：初始阶段、挂载阶段、更新阶段和销毁阶段。每个阶段包含两个生命周期钩子：

1.1 初始阶段

beforeCreate()：实例创建前，data和methods尚未初始化，无法访问。
created()：实例创建后，data和methods已经初始化，可以访问。

1.2 挂载阶段

beforeMount()：挂载前，页面尚未渲染，真实DOM还未生成。
mounted()：挂载后，页面渲染完成，可以操作DOM。

1.3 更新阶段

beforeUpdate()：更新前，数据发生变化但页面尚未更新。
updated()：更新后，页面已更新。

1.4 销毁阶段

beforeDestroy()：销毁前，Vue实例仍在，但监视器、子组件和自定义事件已失效。
destroyed()：销毁后，所有绑定已解绑，但Vue实例仍存在。

2. 生命周期钩子的应用场景

每个生命周期钩子都有其特定的用途，开发者可以根据需要在这些钩子中编写代码：

2.1 初始阶段

beforeCreate：适合添加全局事件总线、显示加载效果。
created：适合发送网络请求获取数据、添加定时器。

2.2 挂载阶段

beforeMount：适合在页面渲染前进行数据操作。
mounted：适合操作DOM、请求数据。

2.3 更新阶段

beforeUpdate：适合在更新前访问现有DOM，手动移除事件监听器。
updated：适合在页面更新后对数据进行统一处理。

2.4 销毁阶段

beforeDestroy：适合清除定时器、解绑自定义事件、解除监听。
destroyed：适合进行销毁后的清理工作。

3. 面试题：请求数据应该在哪个生命周期钩子中完成？

答案：
建议在created钩子中请求数据。

原因：
在created阶段，Vue实例已经完成初始化，data和methods都可以正常访问。此时请求数据可以利用Vue的响应式系统，一旦数据更新，页面会自动渲染。此外，created阶段通常比mounted更早触发，可以减少用户等待时间，提升用户体验。

适用场景：

如果请求的数据是页面渲染所必需的，且不依赖于DOM操作，那么created是最佳选择。
在created阶段请求数据后，可以在mounted阶段进一步操作DOM，确保页面渲染完成后进行交互。

示例代码：

new Vue({
  el: "#app",
  data: {
    msg: "",
  },
  created() {
    // 在created中请求数据
    fetch("https://api.example.com/data")
      .then(response => response.json())
      .then(data => {
        this.msg = data.message; // 更新数据
      });
  },
  mounted() {
    // 在mounted中操作DOM
    console.log("页面已渲染，可以操作DOM");
  },
});

总结：
虽然mounted阶段也可以请求数据，但created阶段更适合用于获取页面渲染所需的数据，因为它可以更早地触发，减少用户等待时间。

4. 示例代码分析

现提供了一个示例代码，展示了如何在Vue实例中使用生命周期钩子。以下是代码的详细分析：

4.1 示例代码

<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <h3>计数器：{{counter}}</h3>
    <button @click="add">点我加1</button>
    <h3 v-text="counter"></h3>
    <button @click="destroy">点我销毁</button>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        msg: "Vue生命周期",
        counter: 1,
      },
      methods: {
        add() {
          console.log("add....");
          this.counter++;
        },
        destroy() {
          this.$destroy(); // 销毁Vue实例
        },
      },
      watch: {
        counter() {
          console.log("counter被监视一次！");
        },
      },
      beforeCreate() {
        console.log("beforeCreate", this.counter); // 输出undefined
      },
      created() {
        console.log("created", this.counter); // 输出1
      },
      beforeMount() {
        console.log("beforeMount");
      },
      mounted() {
        console.log("mounted");
        console.log(this.$el instanceof HTMLElement); // 输出true
      },
      beforeUpdate() {
        console.log("beforeUpdate");
      },
      updated() {
        console.log("updated");
      },
      beforeDestroy() {
        console.log("beforeDestroy");
        this.counter = 1000; // 修改数据，但不会触发更新
      },
      destroyed() {
        console.log("destroyed");
      },
    });
  </script>
</body>

4.2 代码功能说明

数据绑定与方法定义：
- data中定义了msg和counter两个数据。
- methods中定义了add方法用于增加计数器的值，destroy方法用于销毁Vue实例。
生命周期钩子的使用：
- 在beforeCreate中，尝试访问counter，结果为undefined，因为data尚未初始化。
- 在created中，可以正常访问counter，因为data已经初始化。
- 在beforeMount和mounted中，分别输出挂载前后的状态。
- 在beforeUpdate和updated中，分别输出更新前后的状态。
- 在beforeDestroy和destroyed中，分别输出销毁前后的状态。
销毁Vue实例：
- 通过调用this.$destroy()方法，触发销毁阶段的生命周期钩子。