浅谈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 相关文章推荐
基于jquery的固定表头和列头的代码
May 03 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
JScript中的条件注释详解
Apr 24 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
Angular2入门--架构总览
Mar 29 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 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获取地址栏信息的代码
2008/10/08 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
Python学习之asyncore模块用法实例教程
2014/09/29 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python_LDA实现方法详解
2017/10/25 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python设置随机种子实例讲解
2019/09/12 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
便利店的创业计划书
2014/01/15 职场文书
护林防火标语
2014/06/27 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
医学生自荐信范文
2015/03/05 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers