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

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 08. [基础]Vue的生命周期函数(第二篇)

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们