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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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
浅析PHP7的多进程及实例源码
2019/04/14 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python实现音乐下载器
2018/04/15 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Python colormap库的安装和使用详情
2020/10/06 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
军训教官感言
2014/03/02 职场文书
眼镜促销方案
2014/03/15 职场文书
大学生社会实践评语
2014/04/25 职场文书
货款欠条范本
2015/07/03 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
一文简单了解MySQL前缀索引
2022/04/03 MySQL
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python