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，点赞评论让更多的人看到，改正这个错误！

传送门

avatar
文章
阅读
粉丝