浅谈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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
js jquery数组介绍
Jul 15 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
返回上一个url并刷新界面的js代码
Sep 12 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
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
JS:window.onload的使用介绍
2013/11/13 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
python脚本实现验证码识别
2018/06/07 Python
python pandas时序处理相关功能详解
2019/07/03 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
pandas数据拼接的实现示例
2020/04/16 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
python openCV自制绘画板
2020/10/27 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
类的核心特性有哪些
2014/01/01 面试题
一组SQL面试题
2016/02/15 面试题
致接力运动员广播稿
2014/02/17 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
采购求职信
2014/03/17 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
酒店温馨提示语
2015/07/14 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书