vue源码学习：Object.defineProperty 对数组监听

最新推荐文章于 2025-07-07 01:45:31 发布

原创

最新推荐文章于 2025-07-07 01:45:31 发布 · 6.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue

本文探讨了Vue框架如何通过Object.defineProperty来监听并处理数组的变化，特别是针对push、pop、shift、unshift、splice、sort和reverse等7种数组方法的重写，以实现数据双向绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://blog.youkuaiyun.com/ijarvis/article/details/80453546 ，我们介绍了一下defineProperty 对对象的监听，这一篇我们看下defineProperty 对数组的监听

数组的变化

先让我们了解下Object.defineProperty()对数组变化的跟踪情况：

var a={};
bValue=1;
Object.defineProperty(a,"b",{
    set:function(value){
        bValue=value;
        console.log("setted");
    },
    get:function(){
        return bValue;
    }
});
a.b;//1
a.b=[];//setted
a.b=[1,2,3];//setted
a.b[1]=10;//无输出
a.b.push(4);//无输出
a.b.length=5;//无输出
a.b;//[1,10,3,4,undefi