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 常见对象类创建代码与优缺点分析
Dec 07 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
js实现电灯开关效果
Jan 19 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
python mysqldb连接数据库
2009/03/16 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
商场中秋节广播稿
2014/01/17 职场文书
工厂车间标语
2014/06/19 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
大学生助学金感谢信
2015/01/21 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS