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 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 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
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
Python urlopen()函数 示例分享
2014/06/12 Python
django定期执行任务(实例讲解)
2017/11/03 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
某公司面试题
2012/03/05 面试题
爱情检讨书大全
2014/01/21 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
关于感恩的作文
2019/08/26 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL