谷粒商城实战笔记-42-前端基础-Vue-生命周期和钩子函数

下面是Vue官网关于生命周期及不同阶段的钩子函数的图示。

Vue 实例生命周期是指从一个组件被创建到最终被销毁的整个过程。

在这一过程中，Vue 提供了一系列的“钩子”函数，在生命周期的不同阶段执行自定义的代码。

以下是 Vue 对象生命周期的主要阶段和对应的钩子函数：

一，组件声明周期各阶段

1，创建阶段

• beforeCreate: 在实例初始化之后，数据观测 (data observer) 和事件/ watcher 事件配置之前被调用。
• created: 实例创建完成后被立即调用。此时，实例已经完成数据观测和属性、方法的运算，但 $el 尚未被编译和挂载。
• beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

2，运行阶段

• beforeUpdate: 数据更新时调用，发生在虚拟 DOM 打补丁之前。
• updated: 组件 DOM 更新后调用，当这个钩子被调用时，组件 DOM 已经更新，但是可能子组件还没有更新。

3，销毁阶段

• beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed: Vue 实例销毁后调用。在这一步，所有事件监听器会被移除，所有的子实例也会被销毁。

4，错误处理

• errorCaptured: 错误捕获钩子，当捕获一个来自后代组件的错误时被调用。

5，如何定义和使用钩子函数

钩子函数可以在 Vue 的选项对象中定义，如下所示：

export default {
  // 创建阶段
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
    // 这里可以访问 this 对象并进行数据的初始化
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
    // 这里可以访问真实的 DOM 元素，如 this.$el
  },

  // 运行阶段
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },

  // 销毁阶段
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  },

  // 错误处理
  errorCaptured(err, instance, info) {
    console.error(`Error captured in component: ${err}`);
    return false; // 返回 false 表示不再向上冒泡错误
  }
}

6，注意事项

• 不要在 beforeCreate 和 created 钩子函数中访问 DOM，因为在这两个阶段 DOM 还没有生成。
• mounted 钩子函数中可以安全地访问和操作 DOM。
• 如果你在组件中使用了异步数据加载，那么最好在 created 或者 mounted 钩子中进行，以便确保数据在 DOM 渲染之前或之后加载。
• beforeDestroy 可以用来清除定时器、事件监听器等资源，而 destroyed 可以确认这些资源已经被清理。

二，实战

1，实战案例

下面通过一个案例来说明Vue的生命周期。

创建一个Vue对象，并使用钩子函数。

      let app = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("=========beforeCreate=============");
                console.log("数据模型未加载：" + this.name, this.num);
                console.log("方法未加载：" + this.show());
                console.log("html模板未加载：" + document.getElementById("num"));
            },
            created: function () {
                console.log("=========created=============");
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("=========beforeMount=============");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("=========mounted=============");
                console.log("html模板已渲染：" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("=========beforeUpdate=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("=========updated=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            }
        });

如上图，浏览器中运行这段代码时，看到以下的日志输出顺序：

1. beforeCreate 被调用：

   • 因为 beforeCreate 被调用时，Vue 实例的数据和方法都尚未初始化，所以 this 上还无法访问 name, num, show 方法，尝试访问会得到 undefined。
   • 由于此时 DOM 还未生成，document.getElementById("num") 也会返回 null。

2. created 被调用：

   • 此时，数据和方法已经初始化，因此可以访问 name, num, show 方法。
   • 但是，HTML 模板尚未被渲染，document.getElementById("num") 可能返回页面上的元素，但其 innerText 属性仍为空或显示初始值。

3. beforeMount 被调用：

   • 这个钩子在挂载开始前被调用，此时 DOM 元素已经存在，但是模板还未被 Vue 替换和渲染，所以 document.getElementById("num").innerText 依然显示的是未替换的原始内容。

4. mounted 被调用：

   • 这个钩子在挂载完成后被调用，此时 DOM 已经被 Vue 替换并渲染，所以 document.getElementById("num").innerText 显示的是经过 Vue 替换后的值。

5. 当 num 发生变化时（例如通过调用 add 方法），beforeUpdate 和 updated 分别在更新前和更新后被调用：

   • beforeUpdate 中，num 的值已经是更新后的值，但是 DOM 还没有更新。
   • updated 中，num 的值依然是更新后的值，且 DOM 也已经更新完毕。

请注意，在 beforeCreate 和 created 钩子中，尝试调用 this.show() 或访问 this.name 和 this.num 可能不会像预期那样工作，因为在 beforeCreate 阶段，this 指向的 Vue 实例尚未完全初始化。然而在 created 阶段，所有的数据和方法都已可用。

如果在你的 HTML 模板中有一个元素的 ID 为 “num” 并且使用了 {{ num }} 插值表达式，那么在 mounted 和 updated 钩子中，document.getElementById("num").innerText 应该会返回正确的数值。如果没有这样的元素，那么在任何钩子中尝试获取这个元素都会返回 null。

2，完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span id="num">{{num}}</span>
        <button @click="num++">赞！</button>
        <h2>{{name}}，有{{num}}个人点赞</h2>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("=========beforeCreate=============");
                console.log("数据模型未加载：" + this.name, this.num);
                console.log("方法未加载：" + this.show());
                console.log("html模板未加载：" + document.getElementById("num"));
            },
            created: function () {
                console.log("=========created=============");
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("=========beforeMount=============");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("=========mounted=============");
                console.log("html模板已渲染：" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("=========beforeUpdate=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("=========updated=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            }
        });
    </script>
</body>

</html>