Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第3章 Vue.js生命周期函数 3.2 运行期间生命周期函数

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第3章 Vue.js生命周期函数

Vue实例在创建、运行、销毁的过程中，会伴随各种事件(函数)，这些事件就是Vue的生命周期函数，也叫作生命周期钩子。

生命周期函数可以分为三类：创建期间生命周期函数、运行期间生命周期函数、销毁期间生命周期函数

3.2 运行期间生命周期函数

3.2.1 beforeUpdate

沿着流程图往下，

遇到运行期间生命周期函数，第一个就是beforeUpdate

并不是所有的Vue实例都会触发运行期间生命周期函数，当data中的数据发生改变时才会触发，如果data中的数据自始至终没有变过，则运行期间的生命周期函数将不会触发。

举个栗子：

在视图层添加一个修改按钮，单击修改按钮时修改data中的数据

beforeUpdate(){
    console.log("打印内存中的数据：" + this.msg)
    console.log("打印页面中的数据：" + document.getElementById("test").innerText)
}
1
2
3
4

运行

这说明什么呢？

当单击按钮时，data中的数据发生改变，就会触发beforeUpdate生命周期函数，此时可以打印内存中的msg，其值是最新的，即“Hello Vue”，但是在beforeUpdate之前，页面上其实还是“Hlelo world”。

→ 说明这时的Vue只是在内存中完成了编译，还没有将新数据挂载到真实页面中。

3.2.2 updated

再看下来，运行期间最后一个生命周期函数为updated。

举个栗子：

可以看到，都是“Hello Vue”，这就说明当data数据发生变化时，触发updated，这个时候才是真正把内存中修改后的数据挂载到页面中。