浅谈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 相关文章推荐
jquery操作select option 的代码小结
Jun 21 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
js实现密码强度检验
2017/01/15 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python中常见的异常总结
2018/02/20 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
小小的船教学反思
2014/02/21 职场文书
新书发布会策划方案
2014/06/09 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
学校运动会广播稿
2014/10/11 职场文书
教师岗位职责范本
2015/04/02 职场文书
php修改word的实例方法
2021/11/17 PHP
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL