浅谈Vue为什么不能检测数组变动


Posted in Javascript onOctober 14, 2019

问题来源:https://segmentfault.com/q/1010000015780995

问题描述:Vue检测数据的变动是通过Object.defineProperty实现的,所以无法监听数组的添加操作是可以理解的,因为是在构造函数中就已经为所有属性做了这个检测绑定操作。

但是官方的原文:由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如: vm.items.length = newLength

这句话是什么意思?我测试了下Object.defineProperty是可以通过索引属性来设置属性的访问器属性的,那为何做不了监听?

有些论坛上的人说因为数组长度是可变的,即使长度为5,但是未必有索引4,我就想问问这个答案哪里来的,修改length,新增的元素会被添加到最后,它的值为undefined,通过索引一样可以获取他们的值,怎么就叫做“未必有索引4”了呢?

既然知道数组的长度为何不能遍历所有元素并通过索引这个属性全部添加set和get不就可以同时更新视图了吗?

如果非要说的话,考虑到性能的问题,假设元素内容只有4个有意义的值,但是长度确实1000,我们不可能为1000个元素做检测操作。但是官方说的由于JS限制,我想知道这个限制是什么内容?各位大大帮我解决下这个问题,感谢万分

面对这个问题,我想说的是,首先,长度为1000,但只有4个元素的数组并不一定会影响性能,因为js中对数据的遍历除了for循环还有forEach、map、filter、some等,除了for循环外(for,for...of),其他的遍历都是对键值的遍历,也就是除了那四个元素外的空位并不会进行遍历(执行回调),所以也就不会造成性能损耗,因为循环体中没有操作的话,所带来的性能影响可以忽略不计,下面是长度为10000,但只有两个元素的数组分别使用for及forEach遍历的结果:

var arr = [1]; arr[10000] = 1
function a(){
  console.time()
  for(var i = 0;i<arr.length;i++)console.log(1)
  console.timeEnd()
}
a(); //default: 567.1669921875ms
a(); //default: 566.2451171875ms

function b(){
  console.time()
  arr.forEach(item=>{console.log(2)})
  console.timeEnd()
}
b(); //default: 0.81982421875ms
b(); //default: 0.434814453125ms

可以看到结果非常明显,不过,如果for循环中不做操作的话两者速度差不多

其次,我要说的是,我也不知道这个限制是什么 (⇀‸↼‶) ?( •́ω•̀ )?

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。数组的索引也是属性,所以我们是可以监听到数组元素的变化的

var arr = [1,2,3,4]
arr.forEach((item,index)=>{
  Object.defineProperty(arr,index,{
    set:function(val){
      console.log('set')
      item = val
    },
    get:function(val){
      console.log('get')
      return item
    }
  })
})
arr[1]; // get 2
arr[1] = 1; // set 1

但是我们新增一个元素,就不会触发监听事件,因为这个新属性我们并没有监听,删除一个属性也是。

再回到题主的问题,既然数组是可以被监听的,那为什么vue不能检测vm.items[indexOfItem] = newValue导致的数组元素改变呢,哪怕这个下标所对应的元素是存在的,且被监听了的?

为了搞清楚这个问题,我用vue的源码测试了下,下面是vue对数据监测的源码:

浅谈Vue为什么不能检测数组变动

可以看到,当数据是数组时,会停止对数据属性的监测,我们修改一下源码:

浅谈Vue为什么不能检测数组变动

使数据为数组时,依然监测其属性,然后在defineReactive函数中的get,set打印一些东西,方便我们知道调用了get以及set。这里加了个简单判断,只看数组元素的get,set

浅谈Vue为什么不能检测数组变动

然后写了一个简单案例,主要测试使用vm.items[indexOfItem] = newValue改变数组元素能不能被监测到,并响应式的渲染页面

浅谈Vue为什么不能检测数组变动

运行页面

浅谈Vue为什么不能检测数组变动

可以看到,运行了6次get,我们数组长度为3,也就是说数组被遍历了两遍。两遍不多,页面渲染一次,可能多次触发一个数据的监听事件,哪怕这个数据只用了一次,具体的需要看尤大代码怎么写的。就拿这个来说,当监听的数据为数组时,会运行dependArray函数(代码在上面图中get的实现里),这个函数里对数组进行了遍历取值操作,所以会多3遍get,这里主要是vue对data中arr数组的监听触发了dependArray函数。

当我们点击其中一个元素的时候,比如我点击的是3

浅谈Vue为什么不能检测数组变动

可以看到会先运行一次set,然后数据更新,重新渲染页面,数组又是被遍历了两遍。

但是!!!数组确实变成响应式的了,也就是说js语法功能并不会限制数组的监测。

这里我们是用长度为3的数组测试的,当我把数组长度增加到9时

浅谈Vue为什么不能检测数组变动

可以看到,运行了18次get,数组还是被遍历了两遍,点击某个元素同理,渲染的时候也是被遍历两次。

浅谈Vue为什么不能检测数组变动

有了上面的实验,我的结论是数组在vue中是可以实现响应式更新的,但是不明白尤大是出于什么考虑,没有加入这一功能,希望有知道的大佬们不吝赐教

2018-07-27补充

github上提问了尤大

浅谈Vue为什么不能检测数组变动

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

Javascript 相关文章推荐
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
ionic选择多张图片上传的示例代码
Oct 10 Javascript
JS动画定时器知识总结
Mar 23 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 #Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 #Javascript
Vue3 源码导读(推荐)
Oct 14 #Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 #Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 #Javascript
vue循环数组改变点击文字的颜色
Oct 14 #Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 #Javascript
You might like
url decode problem 解决方法
2011/12/26 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
token 机制和实现方式
2020/12/15 Javascript
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
Windows和Linux动态库应用异同
2016/07/28 面试题
化学实验员岗位职责
2013/12/28 职场文书
火锅店营销方案
2014/02/26 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
设计大赛策划方案
2014/06/13 职场文书
汇报材料怎么写
2014/12/30 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL