我们接着上节课的继续来说一下生命周期函数，上一节课我们学习了4个生命周期函数，我们先来回顾一下。

• beforeCreate( ) ：在运用生成之前会自动执行的函数。 可以简称为：“创建之前”
• created( ) : 在实例生成之后会自动执行的函数。 可以简称为：“创建之后”
• beforeMount( ) : 在模板渲染完成之前会自动执行的函数。可以简称为：“挂载之前”
• mounted( ) : 在模板渲染完成之后会自动执行的函数。可以简称为：“挂载之后”

做个小实验

我们来做一个小实验，我们说 beforeMount 方法是在模板渲染之前执行的， mounted 方法是在模板渲染完成之后执行的，那么这个过程中页面会发生什么变化呢。我们简单的做一个小实验来测试一下。

我们在  beforeMount 和 mounted 中分别打印一下 #app 节点中的 innerHTML。

    beforeMount() {  //在模板渲染完成之前执行的函数
      console.log("创建之前")
      console.log(document.getElementById("app").innerHTML)
    },
    mounted() {  //在模板渲染完成之后执行的函数
      console.log("创建之后")
      console.log(document.getElementById("app").innerHTML)
    },

在浏览器中，我们看到beforeMount挂载之前执行 打印的innerHtml为空，mounted 挂载之后 打印出了 hello world 的

这就证明了，当beforeMount 方法执行时也就是组件挂载之前，组件还没有被挂载，这时候#app节点中的内容就是空的，所以作用域#app节点下是获取不到我们的组件内容的。当mounted 执行时表示组件组件挂载之后，组件已经被挂载上去了， 所以再来获取#app节点下就有了我们的组件内容 。

理解了这些之后， 我再来学习一下剩下的4个生命周期函数。

beforeUpdate 和 updated

在代码中，我们来写一下这两个生命周期函数。在beforeUpdate()中我来打印一个”更新之前“，并且也它让打印一下#app节点中的innerHTHML内容。

然后还有updated() 我们给它打印一个“更新之后" 同样也打印一下#app节点中的innerHTHML内容。方便我们观察一下作用域内部的变化情况。

代码如下：

    //他是data中的数据发送变化时，会立即自动触发这个函数，我们可以把它简称为更新之前
    beforeUpdate() {  
      console.log("更新之前")
      console.log(document.getElementById("app").innerHTML)
    },
    //它是data数据发生变化，页面重新渲染完后，才触发的函数，我们把它简称为更新之后
    updated() {  
      console.log("更新之后")
      console.log(document.getElementById("app").innerHTML)
    },

在浏览器中运行起来，我们发现并没有打印相关的内容出来。这两个方法根本就没有执行。因为这两个生命周期函数是和数据有关联的。

这两个生命周期函数是要在data数据发生变化了，才会被触发的。

我们现在需要把数据修改一下让它触发这两个函数，在控制台中我们通过vm来改变数据。

vm.$data.message="hello vue3"

我们把message改成了 hello vue3.

这样我们就可以看到， 打印了 "更新之前" 和 "更新之后"， 很直观的就能看出这两个函数的执行先后顺序了。然后在看一下 app 节点中的 innerHTML 。

我们看到了更新之前它打印的还是原来的数据 hello world。而更新之后打印的数据已经是最新的数据hello vue3，并且页面显示也是hello vue3 这说明页面的dom已经被重新渲染了 。

但是 大家注意这里的界面重新渲染，它只会是局部的渲染，而不是整个页面的重新渲染，vue它只会对使用了这条数据的dom进行重新渲染，其他没有使用或者没有绑定这个变量的dom是不会被牵扯到的。大家不要误解。

接下来，我们再来说一下剩下的两个生命周期函数。

beforeUnmount和unmounted

这两个生命周期函数是在Vue销毁时自动才会触发的函数，一个是销毁前执行，一个是销毁后执行。

• beforeUnmount( ) : 当Vue应用销毁之前，才触发这个函数 简称：销毁（卸载）之前
• unmounted() : 当Vue应用已经销毁时，并且DOM完全销毁之后，才触发这个函数。简称：销毁（卸载）之后

我们在代码中来写一下，

beforeUnmount 让它打印一个销毁之前 并且打印#app中的html

unmounted 让它打印一个销毁之后 同样也打印#app中的html

代码如下：

    beforeUnmount() { 
      console.log("销毁之前")
      console.log(document.getElementById("app").innerHTML)
    },
    unmounted() { 
       console.log("销毁之后")
       console.log(document.getElementById("app").innerHTML)
    },

刷新一下浏览器，这两个生命周期函数还是没有执行。因为它们是需要在 Vue销毁时才会触发，那么我们手动销毁一下vue应用来给大家演示一下，在app中有这么一个方法，app.unmount() 用来卸载vue应用。那么我们在控制台中来执行一下。

app.unmount()

执行之后vue应用就被销毁了，“beforeUnmount” 和 “unmounted” 方法就被触发并且也打印出来了相关的信息。

在浏览器中来看看打印结果， beforeUnmount 执行时 打印出了 hello wolrd 内容， 而unmounted执行时却打印出来了空，说名这时候vue运用已经被完全销毁了 实例也没被卸载了，这使用的app终于已经为空了。

疑点补充

在代码中我根本就没有使用 template 属性来声明模版，之前我们都是把组件的html写在template中，这一次我直接把它写到#app中，这样也是可以的。在之前给大家分析的图中有这么一个步骤，

在mounted 生命周期函数执行之后，vue会来判断，template属性是否存在，如果不存在 它会走NO这边的逻辑。 这时候 vue就会把作用域 #app 内的html当作模板， 所以我们也可以不写template，直接在#app中来编写我们的组件模板。

<div id="app">
    <div @click="handelItemClick">{{message}}</div>
</div>

在模版我给div绑定来一个click点击事件，让它去执行handelItemClick方法，在这个方法中来修改了message变量为vue。 这段代码只是我在录视频之前作准备时写的忘删除了， 大家不要有疑惑，这和我们在的浏览器调试工具中直接输入vm.$data.message来修改message起到作用啊。 在上节课我们就说过了这种。

总结

这节课到这里算是结束了，我来总结一下吧，vue中总共有8个生命周期函数。

• beforeCreate( ) ：在实例创建之前会触发这个函数。简称：创建之前。
• created( ) : 在实例创建之后会触发这个函数。 简称：创建之后。
• beforeMount( ) : 在模板挂载之前会触发这个函数。简称：挂载（渲染）之前。
• mounted( ) : 在模板挂载之后触发这个函数。 简称：挂载（渲染）之后
• beforeUpdate ：当data中的数据变化时， 会立即触发这个函数。简称：更新之前
• updated：当data中的数据发生变化，页面重新渲染之后，会触发这个函数。 简称：更新之后
• beforeUnmount( ) :当Vue应用销毁之前，会自动触发这个函数。简称：销毁（卸载）之前。
• unmounted() : 当Vue应用销毁后，并且DOM完全销毁之后，才触发这个函数。 简称：销毁（卸载）之后。