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')
},

在浏览器中你是可以看出先后顺序的。这个不太直观,如何用代码的方式看出beforeUpdateupdated区别?我们可以通过下面这种方法。

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 完全销毁之后,会自动执行

这些生命周期虽然多,你可以成对的去记忆,这样就有四个关键节点了:创建、渲染、更新、销毁。最主要的理解是他们是自动执行的函数。

「点点赞赏,手留余香」

6

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 08. [基础]Vue的生命周期函数(第二篇)

2 评论

  1. 为啥后面就没有页面的全部代码了:..(

    1. 前边写了几个例子,你可以自己模仿着写,观察,大同小异

发表回复