Vue.js 生命周期详解：从创建到销毁的全过程

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

前言

在前端开发的世界里，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 的生命周期，并在实际开发中灵活运用