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 DOM的学习笔记
Dec 22 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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+MySQL 制作简单的留言本
2009/11/02 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
python使用turtle绘制分形树
2018/06/22 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
《与象共舞》教学反思
2014/02/24 职场文书
2014组织生活会方案
2014/05/19 职场文书
推广普通话标语
2014/06/27 职场文书
社区创先争优承诺书
2014/08/30 职场文书
四查四看整改措施
2014/09/19 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
优秀志愿者感言
2015/08/01 职场文书
美容院管理规章制度
2015/08/05 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android