08. [基础]Vue的生命周期函数(第二篇)
我们接着上篇文章继续学习,上篇文章只讲了 Vue3 中的前四个生命周期,先来简单的回顾一下。
beforeCreate()
:在实例生成之前会自动执行的函数created()
: 在实例生成之后会自动执行的函数beforeMount()
: 在模板渲染完成之前执行的函数mounted()
: 在模板渲染完成之后执行的函数
beforeUpdate 和 updated 生命周期函数
这两个生命周期函数在 Vue 中的 data 数据发生变化时,才会被执行,一个是在变化之前,一个是在变化之后。我们先来看beforeUpdate
函数,也就是在数据变化之前。
为了能展示这个效果,我们写一个数据变化的功能,每次点击文字都进行改变。在上篇文章编写的handleItemClick
方法中,改变message
的值。这里使用了三元运算符,代码如下:
handleItemClick() { this.message = this.message == 'mybj123.com' ? "码云笔记" : "mybj123.com" }
有了这个方法之后,再来编写beforeUpdate
方法。代码如下:
beforeUpdate
:当 data 中的数据变化时, 会立即自动执行的函数
beforeUpdate() { console.log('beforeUpdate') },
写完后,你可以打开浏览器去看一下效果。
updated
:当 data 中的数据发生变化,页面重新渲染完后,会自动执行的函数。
updated() { console.log('updated') },
在浏览器中你是可以看出先后顺序的。这个不太直观,如何用代码的方式看出beforeUpdate
和updated
区别?我们可以通过下面这种方法。
beforeUpdate() { console.log('beforeUpdate') console.log(document.getElementById('app').innerHTML) }, updated() { console.log('updated') console.log(document.getElementById('app').innerHTML) },
通过这种形式,就可以清楚的看出,在beforeUpdate
时,DOM 的内容并没有渲染更新,而到了updated
中 DOM 的内容已经进行了更新。这就是两个生命周期函数的区别。
beforUnmount 和 unmounted 生命周期函数
这两个生命周期函数是在 Vue 销毁时自动执行的函数,一个是销毁前执行,一个是销毁后执行。
beforeUnmount()
: 当 Vue 应用失效时,会自动执行的函数。unmounted()
: 当 Vue 应用失效时,且 DOM 完全销毁之后,会自动执行。
我们可以先把这两个生命周期函数写在页面上,代码如下:
beforeUnmount() { console.log('beforeUnmount') }, unmounted() { console.log('unmounted') },
那如何能看到这个效果那?这个需要在浏览器的控制台中输入销毁代码。
app.unmount()
这时候就会打印出这两个对应的生命周期函数了。当然你这时候如果编写程序看出页面变化,也可以通过打印innerHTML
方式。来看出效果。
beforeUnmount() { console.log('beforeUnmount') console.log(document.getElementById('app').innerHTML) }, unmounted() { console.log('unmounted') console.log(document.getElementById('app').innerHTML) },
这时候在浏览器执行app.unmount()
,会看到,在beforeUnmount
方法中还是有 DOM 内容的,然后到了unmounted
方法中,就已经没有任何的 DOM 内容了。
现在来总结一下:Vue3 中有八个生命周期函数,
beforeCreate()
:在实例生成之前会自动执行的函数created()
: 在实例生成之后会自动执行的函数beforeMount()
:在模板渲染完成之前执行的函数mounted()
:在模板渲染完成之后执行的函数beforeUpdate
:当 data 中的数据变化时, 会立即自动执行的函数updated
:当 data 中的数据发生变化,页面重新渲染完后,会自动执行的函数beforeUnmount()
:当 Vue 应用失效时,会自动执行的函数unmounted()
:当 Vue 应用失效时,且 DOM 完全销毁之后,会自动执行
这些生命周期虽然多,你可以成对的去记忆,这样就有四个关键节点了:创建、渲染、更新、销毁。最主要的理解是他们是自动执行的函数。
码云笔记 » 08. [基础]Vue的生命周期函数(第二篇)
为啥后面就没有页面的全部代码了:..(
前边写了几个例子,你可以自己模仿着写,观察,大同小异