第十一章 Vue生命周期及生命周期的四个阶段
目录
一、引言
1.1. Vue生命周期的具体阶段
1.2. 每个阶段的具体作用和常用场景
1.3. 生命周期钩子函数
二、代码示例
三、运行效果
一、引言
Vue生命周期是指Vue组件实例从创建到销毁的整个过程。在这个过程中，组件经历了一系列的阶段，每个阶段都有其特定的生命周期钩子函数，这些钩子函数允许在不同的阶段插入开发人员自定义的代码逻辑。理解Vue生命周期有助于更好地管理组件的状态和行为，特别是在数据管理和DOM渲染方面。
1.1. Vue生命周期的具体阶段
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁
1. 创建
beforeCreate：在实例创建之前调用，此时还没有调用data和methods中的方法。
created：实例创建后调用，此时已经完成了数据的观测，但是尚未挂载DOM，$el属性尚不可用。
2. 挂载
beforeMount：在挂载之前调用，相关的render函数首次被调用，可以在此时对实例进行渲染。
mounted：实例已经挂载到DOM上后调用，此时期已经和DOM进行了关联，可以用$el访问到挂载的DOM元素。
3. 更新
beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。
updated：数据更新后调用，虚拟DOM已经打补丁之后。
4. 销毁
beforeDestroy：实例销毁之前调用。
destroyed：实例已销毁后调用。
1.2. 每个阶段的具体作用和常用场景
- created：常用于发起网络请求，因为此时已经完成了数据的观测，但尚未挂载DOM。
- mounted：常用于操作DOM元素，因为此时实例已经挂载到DOM上。
- updated：常用于执行依赖于DOM的操作，因为此时虚拟DOM已经更新。
- beforeDestroy：常用于进行清理工作，如移除事件监听器等，因为实例即将销毁。
1.3. 生命周期钩子函数
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.7.16/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 app实例的destroy()方法。