Vue响应式原理详解


Posted in Javascript onApril 18, 2017

Vue 嘴显著的特性之一便是响应式系统(reactivity system),模型层(model)只是普通JavaScript对象,修改它则更新视图(view)。

Vue 响应式系统的底层细节

如何追踪变化

把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象的所有属性,并使用Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty是仅ES5支持,并无法shim的特性,这也就是为什么Vue不支持IE8以及更低版本浏览器的原因。

用户看不到getter/setter,但是在内部他们让Vue跟踪依赖,在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖。之后当依赖项的setter 被调用时,会调用 watcher 重新计算,从而致使它关联的组件得以更新。

Vue响应式原理详解

变化检测问题

受现代JavaScript的限制,Vue不能检测到对象属性的添加和删除。由于Vue会在初始化实例时对属性执行getter/setter转化过程,所以属性必须在data对象上存在才能让Vue转化它,这样才能让它是相应的。例如:

var vm=nrew Vue({

el:'#app',


data:{



a:1


}

});

//vm.a是响应的

vm.b=3;//vm.b是非响应的

Vue不允许在已经创建的实例上动态添加新的根级响应式属性(root-lever reactive property).然而它可以使用Vue.set(object,key,value)方法

将响应属性添加到嵌套的对象上:

Vue.set(object.someObject,'b',2);

你哈可以使用vm.$set实例方法,这也是全局Vue.set方法的别名:

this.$set(this.someObject,'b',2)

有时你想向已有对象上添加一些属性,例如使用Object.assign()或_.extend()方法来添加属性。但是,添加到对象上新属性不会触发更新。这这种情况下可以常见一个新的对象,让它包含元对象的属性和新的属性:

//替换 ‘object.assign(this.someObject,{a:1,b:2})'

this.someObject=Object.assign({},this.someObject,{a:1,b:2});

声明响应式属性

由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕只是一个空值:

var vm = new Vue({
 data: {
 // 声明 message 为一个空值字符串
 message: ''
 },
 template: '<div>{{ message }}</div>'
})
// 之后设置 `message` 
vm.message = 'Hello!'

如果在data选项中未声明message,Vue将警告你渲染函数在视图访问的属性不存在。

这样的限制在背后是有其技术原因的,它消除了在依赖项跟踪系统中一类边界情况,也使Vue实例在类型检查系统的帮助下运行的更高效。而且在代码可维护性方面也有一点重要的考虑: data 对象就像组件状态的概要,提前声明所有额响应式属性,可以让组件代码在以后重新阅读或者其他开发人员阅读时更易于被理解。

异步更新队列

Vue异步执行DOM更新。只要观察到数据变化,Vue将开启一个队列,并缓冲在同一个事件循环中发生的所有数据改变。如果同一个watcher被多次触发,只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后,在下一个事件循环‘tick'中,Vue刷新队列并执行实际工作。Vue在内部尝试对异步队列使用原生的Promise.then,MutationObserver,如果执行环境不支持,会采用setTimeout(fn,0)代替。

例如,当你设置vm.someData='new value',该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个‘tick'更新。多数情况下我们不需要关心这个过程,但是如果你想在DOM状态更新后做点儿什么,这就可能会有些棘手。虽然Vue.js通常鼓励开发人员沿着‘数据驱动'的方式思考,避免直接接触DOM,但是有时我们确实要这么做。为了在数据变化之后等待Vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTick(callback).这样回调函数在DOM更新完成后就会调用。例如:

<div id="example">{{message}}</div>
var vm = new Vue({
 el: '#example',
 data: {
 message: '123'
 }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
 vm.$el.textContent === 'new message' // true
})

在组件中使用vm.$nextTick()实例方法特别方便,因为它不需要全局Vue,并且回调函数中的 this 将自动绑定到当前的Vue实例上:

Vue.component('example', {
 template: '<span>{{ message }}</span>',
 data: function () {
 return {
  message: 'not updated'
 }
 },
 methods: {
 updateMessage: function () {
  this.message = 'updated'
  console.log(this.$el.textContent) // => '没有更新'
  this.$nextTick(function () {
  console.log(this.$el.textContent) // => '更新完成'
  })
 }
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
jstree的简单实例
Dec 01 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
详解vue-router基本使用
Apr 18 #Javascript
Vue键盘事件用法总结
Apr 18 #Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 #Javascript
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
微信小程序实战之自定义模态弹窗(8)
Apr 18 #Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 #Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 #Javascript
You might like
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
js倒计时小程序
2013/11/05 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
JS中的多态实例详解
2017/10/15 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python编程之属性和方法实例详解
2015/05/19 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python定时任务 sched模块用法实例
2019/11/04 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
大队委竞选演讲稿
2014/04/28 职场文书
投标服务承诺书
2014/05/28 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
初中数学教学随笔
2015/08/15 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis