浅谈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 29 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
Java 生成随机字符的示例代码
Jan 13 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检测useragent版本示例
2014/03/24 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
总经理秘书工作职责
2013/12/26 职场文书
网页美工求职信
2014/02/15 职场文书
2014年高考决心书
2014/03/11 职场文书
2014年团总支工作总结
2014/11/21 职场文书
2015年试用期工作总结
2014/12/12 职场文书
护士年终考核评语
2014/12/31 职场文书
银行自荐信范文
2015/03/25 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
Apache自带的ab压力测试工具的实现
2022/07/23 Servers