下面是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);
}
});
如上图，浏览器中运行这段代码时，看到以下的日志输出顺序：
-
beforeCreate被调用：- 因为
beforeCreate被调用时，Vue 实例的数据和方法都尚未初始化，所以this上还无法访问name,num,show方法，尝试访问会得到undefined。 - 由于此时 DOM 还未生成，
document.getElementById("num")也会返回null。
- 因为
-
created被调用：- 此时，数据和方法已经初始化，因此可以访问
name,num,show方法。 - 但是，HTML 模板尚未被渲染，
document.getElementById("num")可能返回页面上的元素，但其innerText属性仍为空或显示初始值。
- 此时，数据和方法已经初始化，因此可以访问
-
beforeMount被调用：- 这个钩子在挂载开始前被调用，此时 DOM 元素已经存在，但是模板还未被 Vue 替换和渲染，所以
document.getElementById("num").innerText依然显示的是未替换的原始内容。
- 这个钩子在挂载开始前被调用，此时 DOM 元素已经存在，但是模板还未被 Vue 替换和渲染，所以
-
mounted被调用：- 这个钩子在挂载完成后被调用，此时 DOM 已经被 Vue 替换并渲染，所以
document.getElementById("num").innerText显示的是经过 Vue 替换后的值。
- 这个钩子在挂载完成后被调用，此时 DOM 已经被 Vue 替换并渲染，所以
-
当
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>
