引言
在前端开发的广袤宇宙中，Vue.js 无疑是一颗璀璨夺目的明星。自诞生以来，它凭借着简洁易用的语法、高效灵活的特性以及强大丰富的生态系统，迅速赢得了全球前端开发者的青睐，成为构建现代 Web 应用的首选框架之一。
想象一下，我们在开发一个电商网站，从商品展示、购物车管理到用户订单处理，Vue.js 就像一位无所不能的工匠，将各个功能模块巧妙地雕琢出来，为用户呈现出流畅、便捷的购物体验；又或者是在打造一个社交平台，Vue.js 助力实现实时动态展示、消息交互等功能，让用户沉浸在互动的乐趣中。Vue.js 的身影无处不在，大到复杂的企业级应用，小到精致的个人项目，都能看到它出色的表现。
而在 Vue.js 的众多核心概念里，生命周期钩子就像是隐藏在幕后的指挥家，默默地掌控着整个组件的运行节奏。它在组件从创建、挂载、更新到销毁的每一个关键阶段，都为开发者提供了施展拳脚的舞台，让我们能够在合适的时机执行自定义的代码逻辑。无论是在组件初始化时获取数据，还是在组件销毁前清理资源，生命周期钩子都发挥着至关重要的作用。接下来，就让我们一起揭开 Vue.js 生命周期钩子的神秘面纱，深入探索它的奇妙世界。
Vue.js 生命周期钩子初相识
什么是生命周期钩子
在 Vue.js 的世界里，每一个组件都像是一个有生命的个体，从诞生到消亡，经历着一系列有序的阶段，这个过程就被称为组件的生命周期。而生命周期钩子，简单来说，就是在组件生命周期的特定阶段自动执行的函数，就像是在组件生命旅程中的关键节点上设置的 “触发器” ，允许开发者插入自定义的代码逻辑。
当我们创建一个 Vue 组件时，它首先会经历初始化阶段，此时会触发beforeCreate钩子函数，在这个阶段，组件实例刚刚被创建，数据观测和事件配置尚未完成，组件的data和methods等属性还无法访问，就像一个婴儿刚刚孕育，各项身体机能还未发育完全。紧接着，created钩子函数被触发，此时组件实例已经完成了数据观测、属性和方法的运算，以及事件监听的配置，我们可以在这个阶段进行一些数据初始化、异步请求等操作，就好比婴儿已经具备了基本的生存能力，可以开始接收外界的信息了。
随后进入挂载阶段，beforeMount钩子函数在挂载开始之前被调用，此时组件的模板已经编译完成，但还没有被挂载到 DOM 上，就像是房子的设计图纸已经画好，但还没有开始动工建造。当组件成功挂载到 DOM 后，mounted钩子函数被触发，这时候我们就可以访问到真实的 DOM 元素，进行一些依赖 DOM 的操作，比如初始化第三方插件、绑定事件监听器等，房子已经建好，我们可以开始装修布置了。
在组件的运行过程中，如果数据发生变化，就会进入更新阶段。beforeUpdate钩子函数会在数据更新时被调用，此时数据已经发生改变，但 DOM 还未更新，我们可以在这个阶段获取更新前的数据状态，做一些数据处理或记录。当数据更新完成，DOM 重新渲染后，updated钩子函数被触发，我们可以在这个阶段对更新后的 DOM 进行操作，或者执行一些与 DOM 更新相关的逻辑。
最后，当组件需要被销毁时，beforeDestroy钩子函数会在实例销毁之前被调用，此时组件仍然完全可用，我们可以进行一些清理工作，比如清除定时器、解绑事件监听器等，就像我们在离开一个地方之前，要把东西收拾干净。当组件完全销毁后，destroyed钩子函数被触发，此时组件的所有指令都已被解除绑定，事件监听器也被移除，组件彻底从内存中消失。
为什么生命周期钩子很重要
生命周期钩子在 Vue.js 开发中扮演着举足轻重的角色，它为开发者提供了极大的灵活性和控制权，使得我们能够构建出健壮、高效且功能丰富的应用程序。
从数据获取的角度来看，在created钩子函数中，我们可以方便地发起网络请求，获取初始化数据。例如，在开发一个新闻资讯应用时，我们可以在created阶段调用 API 获取最新的新闻列表数据，然后将其存储在组件的data中，为后续的页面渲染做好准备。这样，当组件挂载到 DOM 上时，就能立即展示有意义的数据，提升用户体验。
在 DOM 操作方面，mounted钩子函数是我们的得力助手。很多时候，我们需要在组件渲染完成后对 DOM 进行一些额外的操作，比如初始化一个轮播图插件、设置滚动条的样式或行为等。只有在mounted阶段，我们才能确保 DOM 元素已经真实存在，从而安全地进行这些操作。想象一下，在一个电商产品详情页面中，我们需要在页面加载完成后，初始化一个放大镜效果的插件，以便用户能够更清晰地查看商品细节，mounted钩子函数就为我们提供了实现这一功能的最佳时机。
事件绑定也是生命周期钩子的重要应用场景之一。在mounted阶段，我们可以将各种事件监听器绑定到 DOM 元素上，实现用户与页面的交互。比如，在一个表单组件中，我们可以在mounted时为提交按钮绑定点击事件，当用户点击按钮时，触发表单验证和提交逻辑。而在组件销毁时，通过beforeDestroy钩子函数解绑这些事件监听器，可以避免内存泄漏和不必要的性能开销，确保应用的稳定性和性能。
资源清理同样不可或缺。当组件不再需要时，我们必须及时清理它所占用的资源，以释放内存和提高应用的性能。beforeDestroy钩子函数为我们提供了执行这些清理操作的机会，比如清除定时器、取消网络请求、解绑全局事件等。例如，在一个实时数据监控组件中，如果我们使用了定时器来定时获取最新数据，那么在组件销毁前，就需要在beforeDestroy中清除这个定时器，否则定时器会继续运行，浪费系统资源，甚至可能导致意想不到的错误。
深入剖析生命周期钩子
接下来，我们深入到 Vue.js 生命周期钩子的内部，逐一探索每个钩子函数的独特功能和应用场景，通过实际代码示例，让你对它们有更直观、更深刻的理解。
beforeCreate
beforeCreate钩子函数在 Vue 实例初始化之后，数据观测（data observer）和事件配置（event/watcher）之前被调用。此时，Vue 实例仅仅是被创建出来，它的一些基本属性和方法还没有被初始化，就像一个刚刚搭建好框架但还没有填充任何内容的房子。
在beforeCreate阶段，我们无法访问组件的data数据和methods方法，也不能操作 DOM 元素。它主要用于一些初始化操作，比如添加全局的 loading 事件，在组件加载时显示一个加载提示，让用户知道页面正在加载数据 。
<template>
<div>
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
beforeCreate() {
// 显示加载提示，例如设置一个全局的loading状态变量
this.$store.commit('SET_LOADING', true);
}
}
</script>
在上述代码中，我们在beforeCreate钩子函数中通过 Vuex 的commit方法触发一个 mutation，将全局的loading状态设置为true，从而在页面上显示加载提示。
created
created钩子函数在实例创建完成后被立即调用。到了这个阶段，Vue 实例已经完成了数据观测（data observer）、属性和方法的运算，以及 watch/event 事件回调的配置。此时，我们可以访问到组件的data数据和methods方法，就像房子已经装修好了，里面的家具和设施都已齐全，可以正常使用了。
created钩子函数是一个非常常用的钩子，通常用于初始化组件的数据和状态，比如调用 API 加载数据。在这个阶段，由于 DOM 还没有被挂载，所以不能直接操作 DOM 元素，但可以进行一些与数据相关的操作，比如对获取到的数据进行预处理 。
<template>
<div>
<ul>
<li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
dataList: []
};
},
created() {
this.fetchData();
},
methods: {
async fetchData() {
try {
const response = await axios.get('/api/data');
this.dataList = response.data;
// 对数据进行预处理，例如添加一个新的属性
this.dataList.forEach(item => {
item.newProperty = 'This is a new property';
});
} catch (error) {
console.error('Error fetching data:', error);
}
}
}
}
</script>
在这个示例中，我们在created钩子函数中调用fetchData方法，通过axios发送 HTTP 请求获取数据，并在获取到数据后对数据进行预处理，添加一个新的属性，然后将数据存储到dataList中，用于后续的页面渲染。
beforeMount
beforeMount钩子函数在挂载开始之前被调用，此时相关的 render 函数首次被调用。在这个阶段，Vue 实例已经完成了模板的编译，生成了虚拟 DOM，但还没有将虚拟 DOM 挂载到真实的 DOM 上，就像房子的设计图纸已经画好，施工材料也已准备就绪，但还没有开始正式施工搭建。
在beforeMount阶段，我们虽然不能直接访问真实的 DOM 元素，但可以访问到模板中的数据和方法。这个钩子函数相对使用频率较低，一般用于在挂载前对一些数据或配置进行最后的调整 。
<template>
<div id="app">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Initial message'
};
},
beforeMount() {
// 对message进行最后的调整
this.message = 'Adjusted message before mount';
}
}
</script>
在上述代码中，我们在beforeMount钩子函数中对message数据进行了调整，修改了它的值，这个修改后的message将在后续的挂载过程中被渲染到页面上。
mounted
mounted钩子函数在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。此时，组件已经成功挂载到真实的DOM上，我们可以通过this.$el 访问到真实的 DOM 元素，就像房子已经完全建造好，可以入住并进行各种布置和使用了。
mounted钩子函数是一个非常重要的钩子，常用于进行 DOM 操作、初始化第三方插件、绑定事件监听器等。例如，我们可以在这个阶段初始化一个图表插件，根据数据生成图表展示在页面上 。
<template>
<div>
<canvas id="myChart"></canvas>
</div>
</template>
<script>
import { Chart } from 'chart.js';
export default {
data() {
return {
chartData: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}
]
}
};
},
mounted() {
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: this.chartData,
options: {}
});
}
}
</script>
在这个例子中，我们在mounted钩子函数中获取到canvas元素的上下文，然后使用chart.js库初始化一个柱状图，将chartData中的数据展示在图表上。
beforeUpdate
beforeUpdate钩子函数在数据更新时被调用，发生在虚拟 DOM 打补丁之前。此时，数据已经发生了变化，但 DOM 还没有更新，我们可以在这个阶段访问到更新前的 DOM 状态，就像你要对房间进行重新布置，在工人开始动手之前，你可以再看一眼房间原来的样子。
beforeUpdate钩子函数通常用于在数据更新前进行一些操作，比如手动移除已添加的事件监听器，以避免重复添加或内存泄漏 。
<template>
<div>
<button @click="updateData">Update Data</button>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Old message'
};
},
methods: {
updateData() {
this.message = 'New message';
}
},
beforeUpdate() {
// 移除之前添加的事件监听器
const pElement = document.querySelector('p');
if (pElement) {
pElement.removeEventListener('click', this.handleClick);
}
},
updated() {
// 重新添加事件监听器
const pElement = document.querySelector('p');
if (pElement) {
pElement.addEventListener('click', this.handleClick);
}
},
methods: {
handleClick() {
console.log('Paragraph clicked');
}
}
}
</script>
在上述代码中，当点击按钮更新数据时，beforeUpdate钩子函数会被触发，我们在这个钩子函数中移除p元素上之前添加的点击事件监听器；当数据更新完成后，updated钩子函数被触发，我们再重新添加点击事件监听器，这样可以确保事件监听器的正确管理。
updated
updated钩子函数在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后被调用。此时，组件的 DOM 已经更新为最新状态，我们可以在这个阶段执行依赖于 DOM 的操作，就像房间重新布置完成后，你可以检查新的布置是否符合你的预期，进行一些最后的调整。
需要注意的是，在updated钩子函数中，应该避免再次修改数据，因为这可能会导致无限循环的更新。如果确实需要响应状态改变，通常最好使用计算属性或 watcher 取而代之 。
<template>
<div>
<input v-model="inputValue" type="text">
<p>{{ inputValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
updated() {
// 聚焦输入框，在输入框内容更新后自动获取焦点
const inputElement = document.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}
}
</script>
在这个示例中，当输入框的值发生变化，数据更新并重新渲染 DOM 后，updated钩子函数被触发，我们在这个钩子函数中获取到输入框元素，并调用focus方法使其自动获取焦点，提供更好的用户交互体验。
beforeDestroy
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用，就像你要离开一个房间，在离开之前，你可以收拾一下房间，把东西整理好，带走有用的物品，扔掉不需要的东西。
beforeDestroy钩子函数常用于进行一些清理工作，比如清除定时器、解绑事件监听器、取消网络请求等，以避免内存泄漏和不必要的资源占用 。
<template>
<div>
<button @click="destroyComponent">Destroy Component</button>
</div>
</template>
<script>
export default {
data() {
return {
timer: null
};
},
mounted() {
// 设置定时器
this.timer = setInterval(() => {
console.log('Timer is running');
}, 1000);
},
beforeDestroy() {
// 清除定时器
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
// 解绑事件监听器，假设之前绑定了window的resize事件
window.removeEventListener('resize', this.handleResize);
},
methods: {
destroyComponent() {
this.$destroy();
},
handleResize() {
console.log('Window resized');
}
}
}
</script>
在上述代码中，我们在mounted钩子函数中设置了一个定时器，每隔一秒在控制台打印一条信息；当点击按钮销毁组件时，beforeDestroy钩子函数被触发，我们在这个钩子函数中清除定时器，避免定时器在组件销毁后继续运行，同时解绑之前绑定的window的resize事件监听器，确保资源的正确释放。
destroyed
destroyed钩子函数在 Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，就像你已经完全离开了房间，房间里的一切都与你无关了，房间恢复到最初的状态。
在destroyed钩子函数中，组件已经不存在，无法再访问组件的属性和方法，也不能操作 DOM 元素。这个钩子函数主要用于一些最终的清理操作或记录日志等 。
<template>
<div>
<button @click="destroyComponent">Destroy Component</button>
</div>
</template>
<script>
export default {
destroyed() {
console.log('Component has been destroyed');
// 可以在这里记录组件销毁的日志，例如发送到服务器
// 假设我们有一个logComponentDestroyed方法用于记录日志
this.logComponentDestroyed();
},
methods: {
destroyComponent() {
this.$destroy();
},
logComponentDestroyed() {
// 模拟发送日志到服务器的操作
console.log('Sending component destroy log to server');
}
}
}
</script>
在这个例子中，当组件被销毁时，destroyed钩子函数被触发，我们在这个钩子函数中在控制台打印一条组件已被销毁的信息，并调用logComponentDestroyed方法模拟发送日志到服务器的操作，记录组件销毁的相关信息。
生命周期钩子的高级应用
注意事项和常见错误
在使用 Vue.js 生命周期钩子函数时，有一些注意事项需要牢记，同时也可能会遇到一些常见的错误，下面我们来逐一分析并给出解决方法。
避免在钩子函数中进行异步操作导致的问题
在钩子函数中进行异步操作时，需要特别注意操作的时机和顺序，否则可能会导致意想不到的问题。例如，在created钩子函数中进行异步数据请求时，如果请求时间过长，可能会导致页面长时间处于空白状态，影响用户体验。
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
},
created() {
setTimeout(() => {
this.message = '异步获取的数据';
}, 3000);
}
}
</script>
在上述代码中，我们在created钩子函数中使用setTimeout模拟一个异步操作，延迟 3 秒后更新message数据。这就会导致页面在加载后的 3 秒内一直显示空白，用户体验较差。
为了解决这个问题，我们可以在数据请求前显示一个加载提示，告知用户数据正在加载中。例如：
<template>
<div>
<h1 v-if="loading">数据加载中...</h1>
<h1 v-else>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
loading: true
};
},
created() {
setTimeout(() => {
this.message = '异步获取的数据';
this.loading = false;
}, 3000);
}
}
</script>
在改进后的代码中，我们添加了一个loading状态变量，在数据请求前将其设置为true，显示加载提示；当数据请求完成后，将loading设置为false，隐藏加载提示并显示数据，这样可以提升用户体验。
另外，在异步操作中使用async/await时，要确保代码的逻辑正确。例如：
<template>
<div>
<h1>{{ user.name }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
user: {}
};
},
async created() {
const response = await axios.get('/api/user');
// 这里假设服务器返回的数据结构为{data: {name: 'John'}}
this.user = response.data.data;
}
}
</script>
在这个例子中，我们使用async/await来处理异步数据请求。需要注意的是，await只能用于async函数中，并且要确保await后面的表达式返回一个Promise对象。如果axios.get返回的不是Promise，会导致语法错误。同时，要正确处理服务器返回的数据结构，避免因数据结构不一致而导致的错误。
常见错误及解决方法
- 在 beforeCreate 中访问 data 或 methods：在
beforeCreate钩子函数中，组件的data和methods还未初始化，因此无法访问。例如：
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
};
},
beforeCreate() {
console.log(this.message); // 这里会报错，因为message还未初始化
}
}
</script>
解决方法是将相关操作放在created钩子函数中，因为在created阶段，data和methods已经初始化完成，可以正常访问。
- 在 mounted 中访问子组件的 DOM 元素：在mounted钩子函数中，虽然可以访问当前组件的 DOM 元素，但如果试图访问子组件的 DOM 元素，可能会因为子组件还未完全挂载而失败。例如：
<template>
<div>
<child-component ref="child"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
mounted() {
const childDom = this.$refs.child.$el; // 这里可能会获取不到子组件的DOM元素
console.log(childDom);
}
}
</script>
解决方法是使用$nextTick方法，它会在 DOM 更新完成后执行回调函数。例如：
<template>
<div>
<child-component ref="child"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
mounted() {
this.$nextTick(() => {
const childDom = this.$refs.child.$el;
console.log(childDom);
});
}
}
</script>
在上述代码中，通过$nextTick确保在 DOM 更新完成后再访问子组件的 DOM 元素，从而避免获取不到的问题。
- 在 updated 钩子中更改组件状态导致无限循环：在updated钩子函数中，应该避免再次修改组件的状态，因为这可能会导致无限循环的更新。例如：
<template>
<div>
<button @click="updateData">更新数据</button>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Old message'
};
},
methods: {
updateData() {
this.message = 'New message';
}
},
updated() {
this.message = 'Another new message'; // 这里会导致无限循环更新
}
}
</script>
解决方法是检查updated钩子函数中的逻辑，确保不会在其中修改会触发更新的状态。如果确实需要响应状态改变，通常最好使用计算属性或watch取而代之。例如：
<template>
<div>
<button @click="updateData">更新数据</button>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Old message'
};
},
methods: {
updateData() {
this.message = 'New message';
}
},
watch: {
message(newValue) {
// 在这里处理message的变化，而不是在updated钩子中
console.log('Message has been updated to:', newValue);
}
}
}
</script>
在改进后的代码中，我们使用watch来监听message的变化，而不是在updated钩子中修改message，从而避免了无限循环更新的问题。
总结与展望
总结生命周期钩子的核心要点
Vue.js 生命周期钩子作为 Vue.js 框架的重要组成部分，贯穿了组件从诞生到消亡的整个过程。从beforeCreate的初始化准备，到created阶段的数据获取与初始化操作，再到mounted时组件与 DOM 的完美结合，以及beforeUpdate和updated在数据更新时的精准把控，最后到beforeDestroy和destroyed的资源清理与销毁，每个钩子函数都在特定的阶段发挥着不可或缺的作用。
在实际开发中，正确理解和运用这些生命周期钩子函数，能够帮助我们更高效地管理组件的状态和行为，确保数据的准确加载、DOM 的正确操作以及资源的合理释放，从而提升应用程序的性能和用户体验。例如，在created阶段进行数据请求，能够在组件创建后及时获取所需数据，为后续的渲染和交互做好准备；在mounted阶段初始化第三方插件，能够确保插件在 DOM 加载完成后正常运行；在beforeDestroy阶段清理定时器和解绑事件监听器，能够避免内存泄漏和不必要的资源占用。
