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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
React列表栏及购物车组件使用详解
Jun 28 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 max_execution_time执行时间问题
2011/07/17 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Stop SQL Server
2007/06/21 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
window下eclipse安装python插件教程
2017/04/24 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
python网络应用开发知识点浅析
2019/05/28 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
大学自主招生自荐信范文
2014/02/26 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
见习报告怎么写
2014/10/31 职场文书
普通员工辞职信范文
2015/05/12 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL