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 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
JS模板实现方法
Apr 03 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
详解VUE 数组更新
Dec 16 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
详解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
php正则表达匹配中文问题分析小结
2012/03/25 PHP
如何判断php数组的维度
2013/06/10 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Django中的文件的上传的几种方式
2018/07/23 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python的依赖管理的实现
2019/05/14 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
八年级历史教学反思
2014/01/10 职场文书
经验交流材料格式
2014/12/30 职场文书
收银员岗位职责
2015/02/03 职场文书
仓库管理制度范本
2015/08/04 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js