【后端速成Vue】Vue 的生命周期

前言：

本期将会介绍 Vue 的声明周期对应的钩子，以及理解什么时候该用什么钩子函数。

篮球哥找工作专属IT岗位内部推荐：

专属内推链接：内推通道

1、了解 Vue 的生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

创建阶段：创建响应式数据
挂载阶段：渲染模板
更新阶段：修改数据，更新视图
销毁阶段：销毁Vue实例

每个阶段，所对应了两个钩子，也就是两个函数，下面就让我们来认识什么是生命周期钩子。

2、Vue 生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

在这里插入图片描述

3、beforeCreate 和 created

beforeCreate:
在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

created:
在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

这里用一个小的例子来观察一下 beforeCreate 和 created 的执行时机。

<!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"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>javascript">const app = new Vue({el: '#app',data: {count: 100},// 创建阶段（准备数据）beforeCreate () {console.log('beforeCreate 响应式数据准备好之前', this.count)},created () {console.log('created 响应式数据准备好之后', this.count)// this.数据名 = 请求回来的数据// 可以开始发送初始化渲染的请求了}})</script>
</body>
</html>

在这里插入图片描述
通过上述的代码和控制台运行结果，可以直接发现，beforeCreate 钩子是在响应式数据还没准备好就触发了，而 created 钩子则是在响应式数据准备好后触发，那么通常就可以在 created 钩子中发送初始化渲染数据的请求了。

4、beforeMount 和 mounted

beforeMount：
在挂载开始之前被调用，也就是还没将 Vue 中的响应式数据挂在到 DOM 树之前就被调用。

mounted：
Vue 中的响应式数据被挂在完成后被调用，此时就可以操作最终被挂载数据的 DOM 了。
注意：mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {this.$nextTick(function () {// 仅在整个视图都被渲染之后才会运行的代码})
}

这里我们也通过代码来演示 beforeMount 和 mounted 的执行时机。

<!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></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>javascript">const app = new Vue({el: '#app',data: {title: '篮球哥'},// 挂载阶段（渲染模板）beforeMount () {console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)},mounted () {console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)// 可以开始操作dom了},})</script>
</body>
</html>

在这里插入图片描述
通过代码和控制台的打印不难看出，在 beforeMount 钩子中，Vue 的响应式数据并没有被挂在到 DOM 树中，而 mounted 钩子中去获取 h3 的 innerHTML 获取的值就是对应的 Vue 实例中的 title 响应式数据，所以由此可见，beforeMount 在挂载开始之前被调用，mount 则是在挂在完成后被调用。

5、beforeUpdate 和 updated

beforeUpdate：
在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。

updated：
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：

updated: function () {this.$nextTick(function () {//  仅在整个视图都被重新渲染之后才会运行的代码     })
}

简单举例说明：

<!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>javascript">const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 更新阶段(修改数据 → 更新视图)beforeUpdate () {console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)},updated () {console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)}})</script>
</body>
</html>

在这里插入图片描述
这两个钩子很简单，数据的更新驱动视图更新，beforeUpdate 在视图更新前被调用，updated 在视图更新后被调用，这么简单理解够ok了！

6、beforeDestroy 和 destroyed

beforeDestroy：
实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：
实例销毁后调用。该钩子被调用后，对应 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><br><button @click="fun()">销毁实例</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>javascript">const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 卸载阶段beforeDestroy () {console.log('beforeDestroy, 卸载前')},destroyed () {console.log('destroyed, 卸载后')},methods: {fun() {this.$destroy()}}})</script>
</body>
</html>