vue中created和mounted的区别浅析


Posted in Javascript onAugust 13, 2019

前言

关于vue.js中的生命周期,如果不是有特别的需求,一般在项目开发过程中更多的使用created和mounted,
所以在本文中主要讲解created与mounted在开发中的主要使用区别。

关于完整的生命周期,不久会在另一篇文章中做整体的理解,包括activated、destroyed等,不过可能会有点晚,大家可以留意一下

版本信息:

  • 系统:win10
  • Vue:2.5.2
  • webpack:3.6.0
  • npm:6.9.0
  • node:10.15.3

生命周期

完整的生命周期图示为了避免占用板块,这里就不贴出来了,大家可以自行前往vue生命周期查看。

浏览器渲染过程

具体的浏览器渲染过程我会过几天另外写一遍文章,大家可以去我的文章看看。

  • 构建DOM树
  • 构建css规则树,根据执行顺序解析js文件。
  • 构建渲染树Render Tree
  • 渲染树布局layout
  • 渲染树绘制

生命周期中的浏览器渲染

这里是官方文档对生命周期api的解释,大家可以看看

以下为测试vue部分生命函数

beforeCreate(){
 console.log('beforecreate:',document.getElementById('first'))//null
 console.log('data:',this.text);//undefined
 this.sayHello();//error:not a function
},
created(){
 console.log('create:',document.getElementById('first'))//null
 console.log('data:',this.text);//this.text
 this.sayHello();//this.sayHello()
},
beforeMount(){
 console.log('beforeMount:',document.getElementById('first'))//null
 console.log('data:',this.text);//this.text
 this.sayHello();//this.sayHello()
},
mounted(){
 console.log('mounted:',document.getElementById('first'))//<p></p>
 console.log('data:',this.text);//this.text
 this.sayHello();//this.sayHello()
}

通过上述测试我们可以知道,

生命周期 是否获取dom节点 是否可以获取data 是否获取methods
beforeCreate
created
beforeMount
mounted

以我的个人理解,vue生命周期实际上和浏览器渲染过程是挂钩的,

在beforecreate阶段,对浏览器来说,整个渲染流程尚未开始或者说准备开始,对vue来说,实例尚未被初始化,data observer和 event/watcher也还未被调用,在此阶段,对data、methods或文档节点的调用现在无法得到正确的数据。

在created阶段,对浏览器来说,渲染整个HTML文档时,dom节点、css规则树与js文件被解析后,但是没有进入被浏览器render过程,上述资源是尚未挂载在页面上,也就是在vue生命周期中对应的created
阶段,实例已经被初始化,但是还没有挂载至$el上,所以我们无法获取到对应的节点,但是此时我们是可以获取到vue中data与methods中的数据的

在beforecreate阶段,实际上与created阶段类似,节点尚未挂载,但是依旧可以获取到data与methods中的数据。

在mounted阶段,对浏览器来说,已经完成了dom与css规则树的render,并完成对render tree进行了布局,而浏览器收到这一指令,调用渲染器的paint()在屏幕上显示,而对于vue来说,在mounted阶段,vue的template成功挂载在$el中,此时一个完整的页面已经能够显示在浏览器中,所以在这个阶段,即可以调用节点了(关于这一点,在笔者测试中,在mounted方法中打断点然后run,依旧能够在浏览器中看到整体的页面)。

写在最后

笔者目前也只是一个职场小白,粗略探讨一下自己的看法,若有疑问,或者文章错误,都可以在评论中指出,我们一起讨论

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js Object2String方便查看js对象内容
Nov 24 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 #Javascript
微信小程序使用npm包的方法步骤
Aug 13 #Javascript
Vue中的transition封装组件的实现方法
Aug 13 #Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 #Javascript
详解json串反转义(消除反斜杠)
Aug 12 #Javascript
json 带斜杠时如何解析的实现
Aug 12 #Javascript
electron实现静默打印的示例代码
Aug 12 #Javascript
You might like
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
Python 的描述符 descriptor详解
2016/02/27 Python
python简单实例训练(21~30)
2017/11/15 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
python3中for循环踩过的坑记录
2020/12/14 Python
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
书法大赛策划方案
2014/06/04 职场文书
后勤工作个人总结
2015/02/28 职场文书
Java基础-封装和继承
2021/07/02 Java/Android
python 详解turtle画爱心代码
2022/02/15 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
python实现双向链表原理
2022/05/25 Python