【Vue.js 入门与实战】--生命周期函数-组运行和销毁阶段的钩子函数

生命周期函数-组运行和销毁阶段的钩子函数

 

目录

一、组件运行阶段

二、组件运行阶段代码演示

三、组件销毁阶段

四、总结

 

 

一、组件运行阶段

上节课学习了创建阶段的生命周期函数，比较重要的两个函数是created 和 mounted 。

在created 阶段，当执行到 created 函数，data 和 methods 就已经被初始化好，当执行到 mounted 时页面上的 DOM 元素是最新的，在 beforemount 阶段内存是最新的，但是页面是旧的。

 

如果要通过某些插件操作页面上的 DOM 节点，最早要在mounted 中进行。只要执行完了 mounted 就表示整个 Vue 实例已经初始化完毕了，此时，组件已经脱离了创建阶段，进入到了运行阶段。

 

运行阶段钩子函数图：

 

以上是组件运行阶段的生命周期函数，只有两个函数，分别是 beforeupdate 和 updated ，当 when date changes 中的 data 改变时，就会触发 beforeupdate，如果 data 上的数据从实例初始化完成后，没有发生过改变，那么beforeupdate 和 updated 函数就不会执行。

 

beforeupdate和 updated执行次数最少是0次，0次代表数据从未改变，最多是无数次，即 data 改变几次，就会触发函数几次。

 

总结：这两个事件会根据 data 数据的改变有选择性的触发0次到多次。

二、组件运行阶段代码演示

修改msg ”@click=”msg””no”>

//当点击时不用写方法，可以直接修改，当数据一被修改，就会触发 beforeupdate()

 

//以下是运行中的两个事件

Beforepdate(){

Console.log(‘界面上元素的内容

‘+document.getElementById(‘h3’).innerText)

console.log('data中的 msg 数据是：’ + this.msg)

}

 

表示界面没有被更新，数据已经被更新了。因为Beforepdate 被触发表示数据发生了改变。

数据永远是最新的，判断界面是否为最新的。

 

这里有两个东西，一个是界面，一个是 data 中的 module ，第一步修改 module module通过 vm 调度者把数据同步到页面中，当数据被更新时，在beforeupdate 函数中，通过

Console.log(document.getElementById(‘h3’).innerText)

获取页面上的数据判断页面是否和数据同步。

 

刷新页面没有输出任何内容，证明 Beforepdate 没有被执行。因为组件创建完毕之后，ms 一直等于 没有发生过改变。可以通过触发按钮使 msg 发生改变。

 

刷新页面，点击修改 msg 按钮，查看运行结果为：界面上的元素：ok。

data中的 msg 数据是 no。

得出结论，当执行 beforedate 时，页面中显示的数据还是旧的，此时，data 数据是最新的，页面尚未和最新的数据保持同步。

 

执行完 beforupdate 函数就会进入 Virtual Dom re-render and patch：这一步执行的是：

先根据 data 中最新的数据，在内存中，重新渲染出一份最新的内存 DOM 树，当最新的内存 DOM 树被更新之后，会把最新的内存 DOM 树，重新渲染到真实的页面中去，这时，就完成了数据从 data (Model层)-> view (视图层)的更新。

 

更新完之后进入到 updated ，在 updated 中再重新输出页面上元素的内容是新的。因为已经重新渲染完毕了。

Updated（）{

Console.log(‘界面上元素的内容

‘+document.getElementById(‘h3’).innerText)

console.log('data中的 msg 数据是：’ + this.msg)

刷新页面，点击修改 msg 按钮，

查看运行结果为：界面上的元素：no。

data中的 msg 数据是: no，

说明当执行updated 时，页面和 data 数据已经保持同步，都是最新的。

 

 

三、组件销毁阶段

当组件运行完后有个销毁的过程，销毁就是在页面上有些实例，当关闭页面，就会执行销毁的过程。

 

销毁阶段钩子函数的特点：

当执行 beforeDestroy 钩子函数时，Vue 实例就从运行阶段，进入到了销毁阶段；当执行 beforeDestroy 时，实例所有的 data 和所有的 methods ，以及过滤器、指令....都处于可用状态，此时，还没有真正执行销毁的过程；

 

当执行到 destroyed 函数时，组件已经被完全销毁了。此时，组件中所有的数据、方法、指令、过滤器..… 都已经不可用。

销毁阶段图

 

 

四、总结

在生命周期函数中最重要的是 created 函数和 mounted 函数。

 

对于 beforeupdate 函数要了解执行时机，当数据改变，会触发beforeupdate函数，在执行 beforeupdate 函数时页面是旧的，执行到 updated 函数，页面会变成新的。