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的生命周期函数（第二篇）的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。