浅谈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 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 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
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
php fread函数使用方法总结
2019/05/28 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
vue项目中使用Svg的方法
2018/10/24 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
详解python持久化文件读写
2019/04/06 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
2013年高中生自我评价
2013/10/23 职场文书
中学生自我鉴定
2014/02/04 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
青春奉献演讲稿
2014/05/08 职场文书
离婚协议书怎么写
2014/09/12 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫