浅谈Vue.js 1.x 和 2.x 实例的生命周期


Posted in Javascript onJuly 25, 2017

在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中。当实例化后将经历创建、编译、销毁三个主要阶段。

以下是Vue.js 1.x 实例的生命周期图示:

浅谈Vue.js 1.x 和 2.x 实例的生命周期

Vue.js 1.x 的生命周期钩子

1. init

在实例开始初始化时同步调用。此时数据观测、事件和Watcher都尚未初始化。

2. created

在实例化创建之后同步调用。此时实例已经结束解析选项,已建立:数据绑定、计算属性、方法、Watcher/事件回调,但是还没有开始DOM编译,$el还不存在。

3. beforeCompile

在编译开始前调用。

4. compiled

在编译结束后调用。此时所以指令已经生效,因而数据的变化将触发DOM更新,但是不保证$el已插入文档。

5. ready

在编译结束和$el第一次插入文档后调用,如在第一次attached钩子之后调用。

6. attached

vm.$el 插入 DOM 时调用。

7. detached

在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除,直接操作 vm.$el 不会触发。

8. beforeDestroy

在开始销毁实例时调用,此时实例仍然有功能。

9. destroyed

在实例被销毁之后调用,此时所有的绑定和实例的指令已经解绑,所有子实例已经被销毁。

以下是Vue.js 2.x 实例的生命周期图示:

浅谈Vue.js 1.x 和 2.x 实例的生命周期

Vue.js 2.x 的生命周期钩子

1. 废弃ready,新增mounted

在1.x版本中,ready钩子函数的调用时机是第一次插入DOM后,但是2.0不一定只执行在浏览器中,也可能在服务端渲染,所以废弃ready并新增mounted钩子函数,mounted钩子函数调用时机在DOM树生成之后。

2. 废弃beforeCompile

在1.x版本中,调用beforeCompile钩子函数是在模板编译前,2.0版本中废弃并用created代替。

3. 废弃compiled

在1.x版本中,调用compiled是在编译模板之后、DOM创建之前,2.0版本中废弃并用mounted代替。

4. 废弃attached

在1.x版本中,调用attached是在插入DOM时,2.0版本中不一定会创建真实的DOM,2.0版本废弃。

5. 废弃detached

在1.x版本中,调用detached是移除DOM时,2.0版本中不一定会创建真实的DOM,2.0版本废弃。

6. 新增beforeCreate

2.0版本中新增beforeCreate,在实例初始化之后,数据观察(data observer)和event/watcher事件配置之前被调用。

7. 新增beforeMount

2.0版本中新增beforeMount,是在Watcher之前、模板编译成render方法之后调用,相关render首次被调用。该钩子函数在服务器渲染期间不被调用。

8. 新增beforeUpdate

2.0版本中新增beforeUpdate,是在DOM树生成之前、虚拟DOM树生成之后调用,调用条件是这个vm实例已经mounted过。该钩子函数在服务器渲染期间不被调用。

9. 新增updated

2.0版本中新增updated,在DOM树生成之后调用,调用条件是这个vm实例已经mounted过。该钩子函数在服务器渲染期间不被调用。

10. 新增activated

2.0版本中新增activated,在DOM树生成之后,调用条件是keep-alive组件。该钩子函数在服务器渲染期间不被调用。

11. 新增deactivated

2.0版本中新增deactivated,在Vue实例销毁时调用,调用条件是keep-alive组件。该钩子函数在服务器渲染期间不被调用。

以上这篇浅谈Vue.js 1.x 和 2.x 实例的生命周期就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
浅谈手写node可读流之流动模式
Jun 01 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 #Javascript
基于JavaScript实现百度搜索框效果
Jun 28 #Javascript
深入理解基于vue-cli的vuex配置
Jul 24 #Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 #Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 #Javascript
关于vue-resource报错450的解决方案
Jul 24 #Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 #Javascript
You might like
php 判断数组是几维数组
2013/03/20 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
jQuery取消ajax请求的方法
2015/06/09 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
vue配置多代理服务接口地址操作
2020/09/08 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
儿童python练习实例
2018/05/27 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
高分子材料与工程专业推荐信
2013/12/01 职场文书
关于安全的演讲稿
2014/05/09 职场文书
服务行业口号
2014/06/11 职场文书
三好生演讲稿
2014/09/12 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
python中os.path.join()函数实例用法
2021/05/26 Python
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android