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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
vuex分模块后,实现获取state的值
Jul 26 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
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
python文件操作整理汇总
2014/10/21 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
通过实例学习Python Excel操作
2020/01/06 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
日语求职信范文
2013/12/17 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
公司合并协议书范本
2014/09/30 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
详解Python flask的前后端交互
2022/03/31 Python
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript