浅谈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 document.execCommand() 常用解析
Dec 14 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
实例详解带参数的 npm script
May 28 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 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
PHP的FTP学习(一)
2006/10/09 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP asXML()函数讲解
2019/02/03 PHP
mouse_on_title.js
2006/08/25 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python检测服务器是否正常
2014/02/16 Python
Python AES加密模块用法分析
2017/05/22 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python邮件发送smtplib使用详解
2020/06/16 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python 穷举指定长度的密码例子
2020/04/02 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
五年级科学教学反思
2014/02/05 职场文书
采购助理岗位职责
2014/02/16 职场文书
本科生自荐信
2014/06/18 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
助学贷款贫困证明
2014/09/23 职场文书
个人贷款收入证明
2014/10/26 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
给老师的感谢信
2015/01/20 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
六五普法心得体会2016
2016/01/21 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技