Vue响应式原理深入解析及注意事项


Posted in Javascript onDecember 11, 2017

前言

Vue最明显的特性之一便是它的响应式系统,其数据模型即是普通的 JavaScript 对象。而当你读取或写入它们时,视图便会进行响应操作。文章简要阐述下其实现原理,如有错误,还请不吝指正。下面话不多说了,来随着小编来一起学习学习吧。

响应式data

<div id = "exp">{{ message }}</div>
const vm = new Vue({
 el: '#exp',
 data: {
 message: 'This is A'
 }
})
vm.message = 'This is B' // 响应式
vm._message = 'This is C' // 非响应式

上述代码中,data是Vue实例的数据对象,当实例初始化时,Vue 会遍历 data 中的所有属性,并且使用 Object.definePropery 把这些属性全都转为 getter/setter ,从而让 data 的属性能够响应数据变化。另外,Object.defineProperty 是 ES5 中一个无法 shim(垫片) 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。对象必须是纯粹的对象 (含有零个或多个的 key/value 键值对):浏览器 API 创建的原生对象。所以,在data中声明过的message是响应式数据,而由于_message是在data外使用 Vue 实例增加的数据,所以亦不属于响应式。

关于Object.definePropery

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。这个API是实现响应式数据的关键所在。

Syntax: Object.defineProperty(obj, prop, descriptor)

  • obj: 要定义属性的对象
  • prop: 要定义或修改的属性的名称
  • descriptor: 将被定义或修改的属性描述符。

Tips: 要知道ECMAScript中有两种属性:数据属性和访问器属性。这里的descriptor可取值有数据属性和访问器属性。

数据属性: 包含一个数据值的位置,在此位置可以进行读写操作,有以下特性:

  • [[Configurable]]:对属性的操作可配置性开关,如删除,修改。默认值为true。
  • [[Enumberble]]:是否可枚举(通过for-in)。默认值为true。
  • [[Writable]]:能否修改属性的值。默认值为true。
  • [[value]]:包含这个属性的数据值,读取时从该位置读,写入时把新值存到该位置。默认值为undefined。

访问器属性: 不包含数据值,包含一个函数对(getter/setter)。特性如下:

  • [[Configurable]]:对属性的操作可配置性开关,如删除,修改。默认值为true。
  • [[Enumberble]]:是否可枚举(通过for-in)。默认值为true。
  • [[Get]]:读取属性时调用的函数。默认值为undefined。
  • [[Set]]:写入属性时调用的函数。默认值为undefined。

Tips: 在读取访问器属性时,就会调用getter函数,该函数负责返回有效的值;在写入访问器属性时,会调用setter函数

并传入新值,该函数负责决定如何处理数据,但是这两个函数不一定非要同时存在。Vue便是利用getter/setter这一特性来实现的响应系统。

示例代码:

// 定义一个book对象,_year和edition都属于数据属性。
var book = {
 _year : 2004,
 edition : 1
};
// 对book对象创建 year 访问器属性。
Object.defineProperty(book, "year",{ 
 // 读取 year 访问器属性时,get() 方法返回 _year 的值。
 get : function () {
 console.info(this._year, 'get'); // 2004
 return this._year;
 },
 // 写入 year 访问器属性时,set() 方法对新值进行操作。
 set : function (newValue) {
 if (newValue > 2004) {
 this._year = newValue;
 console.info(this._year, 'set') // 2005 
 this.edition += newValue - 2004;
 }
 }
});
// 读取 year 访问器属性时会返回_year的值。
book.year;
// 写入 year 访问器属性时会调用set() 函数,进行操作。
book.year = 2005; 
console.info(book.edition) // 2
console.info(book) // 此处藏有彩蛋。

watcher

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

如下图所示:

Vue响应式原理深入解析及注意事项

Tips:模板中每个指令/数据绑定都有一个对应的 watcher 对象。其中 watcher扮演的角色相当于是一个纽带,这个纽带的作用就是依赖收集。

变化检测

      1·(Object.observe的废弃),Vue不能检测对象属性的添加或删除,因此属性必须在data对象上,但是可以使用Vue.set(Object,key,value) 来将响应属性添加到对象上 (vm.$set 实例方法Vue.set全局方法)。

      2.使用(Object.assign() 或者_.extend() )方法添加属性,不会触发更新,这时3建议使用oldobject=Object.assign({},oldobject,{key1:value1,key2:value2})

      3.Vue不允许动态添加 根级响应式属性,所有初始实例必须声明(空值也需要)

      4.在数据变化之后立即使用 vm.$nextTick(calllback) 实现在Dom更新后操作

文中还有部分深层细节没有讲述到,后续我也会接着更新系列文章来进一步深深深究vue底层的响应式原理,SYNT。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js循环改变div颜色具体方法
Jun 25 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
js时间戳与日期格式之间转换详解
Dec 11 #Javascript
js时间戳与日期格式之间相互转换
Dec 11 #Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 #Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 #Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 #Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 #Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 #Javascript
You might like
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
解析php中的escape函数
2013/06/29 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
Javascript继承机制详解
2017/05/30 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
交通安全寄语大全
2014/04/08 职场文书
村庄绿化方案
2014/05/07 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书