文享日志

Vue生命周期

代码 Vue.js

发表于2018年11月17日15:43:46

更新于2018年11月17日15:50:26

0条评论 161次阅读

一、前言

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

二、Vue生命周期

1、钩子函数

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

图示如下:

2、代码理解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue生命周期学习</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> </div> </body> <script> var vm = new Vue({ el: '#app', data: { message: 'Vue的生命周期' }, beforeCreate: function() { console.group('------beforeCreate创建前状态------'); console.log("%c%s", "color:red", "el : " + this.$el); //undefined console.log("%c%s", "color:red", "data : " + this.$data); //undefined console.log("%c%s", "color:red", "message: " + this.message) //undefined }, created: function() { console.group('------created创建完毕状态------'); console.log("%c%s", "color:red", "el : " + this.$el); //undefined console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 }, beforeMount: function() { console.group('------beforeMount挂载前状态------'); console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化 console.log(this.$el.innerHTML); //打印"{{message}}" console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 }, mounted: function() { console.group('------mounted 挂载结束状态------'); console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化 console.log(this.$el.innerHTML); //打印"Vue的生命周期" console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 }, beforeUpdate: function() { console.group('beforeUpdate 更新前状态===============》'); //Chrome控制台执行 vm.message = "更新信息" console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el.innerHTML); //打印"Vue的生命周期" console.log("%c%s", "color:red", "data : " + this.$data); // console.log("%c%s", "color:red", "message: " + this.message); }, updated: function() { console.group('updated 更新完成状态===============》'); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el.innerHTML); //打印"更新信息" console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, beforeDestroy: function() { console.group('beforeDestroy 销毁前状态===============》'); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el.innerHTML); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, destroyed: function() { console.group('destroyed 销毁完成状态===============》'); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el.innerHTML); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) } }) </script> </html>

参考: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: "<div>哈哈哈</div>",,刷新页面,然后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条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广