Vue实例中生命周期created和mounted的区别详解


Posted in Javascript onAugust 25, 2017

前言

本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

生命周期先上图

Vue实例中生命周期created和mounted的区别详解

什么是生命周期

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。

再上图,对生命周期图的标注

特别值得注意的是created钩子函数和mounted钩子函数的区别

Vue实例中生命周期created和mounted的区别详解

每个钩子函数都在啥时间触发

beforeCreate

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript中String类的subString()方法和slice()方法
May 24 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
swiperjs实现导航与tab页的联动
Dec 13 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 #Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 #Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 #jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 #Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 #Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 #Javascript
JavaScript数据类型的存储方法详解
Aug 25 #Javascript
You might like
终于听上了直流胆调频
2021/03/02 无线电
phpmyadmin操作流程
2006/10/09 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
详解JavaScript函数
2015/12/01 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
js回调函数仿360开机
2019/12/26 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
python实现图片识别汽车功能
2018/11/30 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
基于python操作ES实例详解
2019/11/16 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python with (as)语句实例详解
2020/02/04 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
乳制品整治工作方案
2014/05/29 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
安全生产协议书
2016/03/22 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python