💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
前言
在前端开发的世界里，Vue.js 因其简洁的 API 和高效的数据绑定特性而广受欢迎。Vue 实例的生命周期是 Vue.js 开发中的一个核心概念，它描述了从 Vue 实例的创建到销毁的整个过程。在这篇博客中，我将深入探讨 Vue 的生命周期，并通过示例代码展示如何在不同的生命周期钩子中执行代码，从而帮助大家在开发中更好地利用 Vue 的功能。
1. Vue 生命周期概述
Vue 实例的生命周期可以分为四个主要阶段：创建阶段、挂载阶段、更新阶段、销毁阶段。每个阶段都伴随着特定的生命周期钩子，允许开发者在特定的时间点执行代码。
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁
1.创建阶段：创建响应式数据
在创建阶段，Vue 实例被初始化，数据观测（reactive data observation）开始，但模板还未挂载，也未渲染到页面上。这个阶段有两个主要的生命周期钩子：
- beforeCreate：在这个阶段，实例刚刚被初始化，数据观测和事件/侦听器的配置都还未开始。此时，你无法访问数据、计算属性、方法或监听器等。
- created：在这个阶段，实例已完成数据观测、属性和方法的运算、
watch/event事件回调的配置。然而，挂载阶段还没开始，$el属性目前不可见。这通常是你执行异步数据请求的最佳时机。 - 代码:
beforeCreate() { console.log('beforeCreate 响应式数据准备好之前', this.count); // 输出：undefined }, created() { console.log('created 响应式数据准备好之后', this.count); // 输出：100 // 这里可以发起数据请求 },
2.挂载阶段：渲染模板
在挂载阶段，Vue 实例的模板被渲染到页面上，实例成为 DOM 树的一部分。这个阶段也有两个生命周期钩子：
- beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。此时模板编译完成，但尚未替换挂载点上的 HTML，所以此时页面上仍然显示的是旧的 DOM。
- mounted：在
el被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了文档内元素，当mounted被调用时vm.el 也在文档内。这意味着你可以安全地操作 DOM 了。
beforeMount() {
console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML); // 输出：{{ title }}
},
mounted() {
console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML); // 输出：计数器
// 此时可以操作 DOM
},3.更新阶段：修改数据，更新视图
当 Vue 实例的数据变化时，Vue 将重新渲染 DOM 以匹配最新的数据。这个过程中也有两个生命周期钩子：
- beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
- updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。但要避免更改状态，因为这可能会导致无限更新循环。
beforeUpdate() {
console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML); // 输出：100
},
updated() {
console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML); // 更新后的数据
},4.销毁阶段：销毁Vue实例
在 Vue 实例销毁的过程中，会调用两个生命周期钩子：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
beforeDestroy() {
console.log('beforeDestroy, 卸载前');
// 清除定时器、事件监听器等
},
destroyed() {
console.log('destroyed，卸载后');
},2. Vue生命周期钩子
Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>{{ title }}</h3>
<div>
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100,
title: '计数器'
},
// 1. 创建阶段（准备数据）
beforeCreate () {
console.log('beforeCreate 响应式数据准备好之前', this.count)
},
created () {
console.log('created 响应式数据准备好之后', this.count)
// this.数据名 = 请求回来的数据
// 可以开始发送初始化渲染的请求了
},
// 2. 挂载阶段（渲染模板）
beforeMount () {
console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
},
mounted () {
console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
// 可以开始操作dom了
},
// 3. 更新阶段(修改数据 → 更新视图)
beforeUpdate () {
console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
},
updated () {
console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
},
// 4. 卸载阶段
beforeDestroy () {
console.log('beforeDestroy, 卸载前')
console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
},
destroyed () {
console.log('destroyed，卸载后')
}
})
</script>
</body>
</html>总结
Vue.js 的生命周期为开发者提供了在不同阶段执行代码的机会，从而让我们能够更灵活地控制 Vue 实例的行为。通过合理利用生命周期钩子，我们可以更好地组织代码，提高应用的性能和可维护性。希望这篇博客能帮助你更好地理解 Vue 的生命周期，并在实际开发中灵活运用
❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
