文享日志

Vue生命周期

发表于2019年02月22日12:48:40

0条评论 174次阅读

一、前言

在使用Vue.js写代码的过程中,虽然懂得生命周期created和mounted在什么时候调用,但对Vue生命周期却没有一个整体的理解。昨天花了点时间,看了看相关的文章,整理了一下


二、Vue生命周期

1、钩子函数

Vue生命周期中有4组8个钩子函数。分别是beforeCreate,created ; beforeMount,mounted ; beforeUpdate,updated ; beforeDestory,destoryed.


图示如下:



2、代码理解

   

   

   

    vue生命周期学习

   

   

       

{{message}}

   

参考:https://segmentfault.com/a/1190000011381906?utm_source=tag-newest


3、详解

通过代码和图示其实已经能够看出Vue生命周期,知道了钩子函数在何时调用。在这里我再简明扼要的说一下。


1) beforeCreated到created

在这个时期,主要完成了数据的初始化,数据的观察,此时数据还没有挂载到Dom树,不进行渲染。。


验证:

在created函数的打印中可以看到能够打印出 this.$data , this.message 并且this.$el为undefined。

控制台输入vm.message = "观察变化" , 回车再输入vm.$data即可看到 , 观察到了数据的变化


2) created到beforeMount

这个时期,首先会观察对象中是否有el选项,有的话,再找有没有template选项,有template的话则将template编译传递到render函数,有render函数将HTML片段渲染到页面,没有template则将outerHTML当做模板进行渲染。如果没有el选项,则停止进行等待,直到vm.$mount("#app")函数进行调用。


验证:

首先注释掉实例代码中的"el"选项,可以看到页面渲染{{message}},Chrome控制台输入vm.$mount("#app"),页面渲染Vue的生命周期。

在代码中添加template: "

哈哈哈
",,刷新页面,然后Chrome控制台输入vm.$mount("#app"),可以看到页面渲染哈哈哈。这里说明template渲染优先级大于outerHTML

添加没有函数体的render函数。刷新页面,然后Chrome控制台输入vm.$mount("#app"),可以看到页面啥也没渲染,说明render函数承担着数据渲染的功能。添加函数体return createElement('h1', 'this is createElement')(注意参数createElement)。页面渲染this is createElement说明render渲染优先级大于template


3)beforeMount到mounted

这个阶段或创建vm.$el,并将DOM上的相应元素替换


验证:

观察示例代码的打印,在beforeMount函数中this.$el.innerHTML打印{{message}},说明此时Vue实例中的数据并没有替换掉相应DOM上的元素。而mounted函数中的this.$el.innerHTML打印Vue的生命周期,说明替换完成。


4)beforeUpdate到updated

虚拟DOM树中更改了数据,再将差异更新到DOM树。


验证:

Chrome控制台输入vm.message = "观察更新",观察示例代码打印,在beforeUpdate中,this.$el.innerHTML打印Vue的生命周期,updated中则打印观察更新,说明在beforeUpdate阶段DOM树中没更新,updated阶段DOM已更新。


5)beforeDestory到destoryed

此阶段,观察者,子组件,事件监听等都销毁了。


验证:

Chrome控制台输入vm.destory(),再输入vm.message = "销毁Vue实例"可以看到页面并没有更新。


三、结语

其实之前对Vue的懂得不是特别多,虽然我也使用了Vue写了几个小项目,最近刚写完一个小项目后,想学习一下React,在学之前,又简单看了一下Vue的文档,看了一下生命周期的图示,就想研究一下,于是也就有了这篇文章。在这里记录一下,供自己复习学习,也供读者研究。




文章参考自详解vue生命周期。


首发与vHanblog : http://blog.docmobile.cn/artical/1542440626648


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广