vue对通过下标修改数组监听不到,和Object.defineProperty无关(这个锅它不背)

4,509 阅读2分钟

我们来百度一下

  • 搜索Object.defineProperty()的缺点

image.png

我们来看下前四个怎么说的

  • 第一个

image.png

  • 第二个 image.png

  • 第三个 image.png

  • 第四个 image.png

  • 排名前几的答案都差不多

我们来看看vue官网的解释

image.png image.png

  • 官网上并没有明确说是Object.defineProperty的问题,说的是由于 JavaScript 的限制,Vue **不能检测**数组和对象的变化,
  • 了解过vue 2.X的双向数据绑定的原理的同学,都知道vue的双向数据绑定是通过Object.defineProperty()来实现的,那百度出来的答案可能有是通过这句话来推断出来的。是Object.defineProperty()的问题,好了,那我们百度出来的答案是正确的?
  • 但是小伙伴来问我,我通过下标来修改数组的数据,Object.defineProperty()是可以监听的数据变化,问的我一懵,同时也给我看了测试代码,难道是尤大佬,说的不明确。 测试代码:
let testArray = [0];
function test(data, key, val) {
  Object.defineProperty(data, key, {
    get() {
      console.log(val);
    },
    set(newV) {
      if (newV !== val) {
        val = newV;
        console.log('检测到变更');
      }
    },
  });
}
test(testArray, 0, aa[0]);

testArray[0] = 1

  • 直接复制代码控制台输出 image.png

  • 以上不是说Object.defineProperty是不能通过下标来修改数组的数据的吗?自己测试怎么是可以修改的,可以检测到的,难道是他们说的都是错误的,关于这个的描述

  • 我命由我不由天,继续测试,

testArray.length = 5

image.png

  • 我们来看控制台输出,数据的长度是修改成功的,看来真的是他们的答案有误。
  • 我还不死心,这种问题,社区的大佬们肯定找都发现了,于是我继续寻找,于是找到了,确实不是Object.defineProperty()的问题,是vue本身做了限制,当数据是数组时,会停止对数据属性的监测, image.png

结束

  • vue对通过下标修改数组监听不到,和Object.defineProperty无关,百度上以及很多源码分析的文章里写的都是有问题的,vue官网的表述可能没有那么明确,最后说是为了性能,可能我自己不去测试的话,也会觉得是Object.defineProperty()的问题,所以小伙伴们在面试中别人问到这个问题,如果面试官说你说的有问题,那你就可以放心的怼回去了, dont bibi, show you my code!`
  • xdm,点赞评论让更多的人看到,改正这个错误!

传送门