浅谈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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
JS的get和set使用示例
Feb 20 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 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
使用phpQuery采集网页的方法
2013/11/13 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
NodeJs——入门必看攻略
2016/06/27 NodeJs
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
性能服装:HYLETE
2018/08/14 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
优秀经理事迹材料
2014/02/01 职场文书
新春文艺演出主持词
2014/03/27 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2015年环卫工作总结
2015/04/28 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
篮球拉拉队口号
2015/12/25 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
Python爬虫基础讲解之请求
2021/05/13 Python