我们来百度一下
- 搜索
Object.defineProperty()的缺点
我们来看下前四个怎么说的
第一个
-
第二个
-
第三个
-
第四个
-
排名前几的答案都差不多
我们来看看vue官网的解释
- 官网上并没有明确说是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
-
直接复制代码控制台输出
-
以上不是说
Object.defineProperty是不能通过下标来修改数组的数据
的吗?自己测试怎么是可以修改的,可以检测到的,难道是他们说的都是错误的,关于这个的描述
-
我命由我不由天,继续测试,
testArray.length = 5
- 我们来看控制台输出,数据的长度是修改成功的,看来真的是他们的答案有误。
- 我还不死心,这种问题,社区的大佬们肯定找都发现了,于是我继续寻找,于是找到了,确实不是Object.defineProperty()的问题,是vue本身做了限制,当数据是数组时,会停止对数据属性的监测,
结束
vue对通过下标修改数组监听不到,和Object.defineProperty无关
,百度上以及很多源码分析的文章里写的都是有问题的,vue官网的表述可能没有那么明确,最后说是为了性能,可能我自己不去测试的话,也会觉得是Object.defineProperty()的问题,所以小伙伴们在面试中别人问到这个问题,如果面试官说你说的有问题,那你就可以放心的怼回去了,don
t bibi, show you my code!`- xdm,点赞评论让更多的人看到,改正这个错误!