vue2视频教程系列第二十节-生命周期函数(2)

2018-09-04vue视频教程系列第二十节-生命周期函数(2)

上一节课我们主要介绍了beforeCreate和created两个钩子函数，它们一个是在初始化数据之前发生一个是在初始化数据之后发生。这节课呢我们继续学习其它四个钩子函数—beforeMounte, mounted, beforeUpdate, updated。

我们继续上一节的工作流往下走，这一步就来到了挂载DOM。什么是挂载DOM呢？就是在main.js里，$mount('#app')将实例挂载到index.html里的id为app的DOM里。

接下来就是编译模板，即将模板编译成浏览器识别的代码。再接下来就是渲染—将编译出来的所有代码注入到id为app的DOM元素里。这一步就分出了两个钩子函数—beforeMounte和mounted。beforeMounte是在渲染之前，mounted是在渲染之后。如何区分呢？我们用一个小实例来深刻认识一下。

首先我们在App.vue里的DOM里写入一段代码一：

<div ref="title">{{ title }}</div>

我们的js部分呢如下：

data() {

        return {

         title: "Hello World!"

        }

},

我想将class=”title”的这段DOM元素在控制台输出，我们这样来写，首先用beforeMounte函数：

beforeMounte () {

      console.log(this.$refs.title)

}

我们发现，控制台输出的是 undefined。为什么会这样呢？因为在这个阶段，我们的模板虽然已经编译了，但还没有注入到DOM里，所以根本取不到我们想要的结果。

而我们将beforeMounte换成mounted后，就可以将DOM元素输出，输出的结果是：

<div>Hello World</div>

说明这个阶段，编译出来的代码已经注入到DOM元素里，所以能取到我们想要的数据。

这节课就到这里了，休息休息一会儿吧！：）

欢迎加入前端学习交流群：duzhan2018