茶余饭后聊聊 Vue3.0 响应式数据那些事儿

Vue2.x 中被大家吐槽的最多的一点就是针对数组只实现了 push,pop,shift,unshift,splice,sort,reverse' 这七个方法的监听，以前通过数组下标改变值的时候，是不能触发视图更新的。这里插一个题外话，很多人认为 Vue2.x 中数组不能实现全方位监听是 Object.defineProperty 不能监听数组下标的改变，这可就冤枉人家了，人家也能侦听数组下标变化的好吗，不信你看

const arr = ["2019","云","栖","音","乐","节"]; 
arr.forEach((val,index)=>{ 
    Object.defineProperty(arr,index,{ 
        set(newVal){ 
            console.log("赋值"); 
        }, 
        get(){ 
            console.log("取值"); 
            return val; 
        } 
    }) 
}) 
let index = arr[1]; 
//取值 
arr[0] = "2050"; 
//赋值 

没毛病，一切变化都在人家的掌握中。上面这段代码，有没有人没看懂，我假装你们都不懂，贴张图

从数组的数据结构来看，数组也是一个 Key-Value 的键值对集合，只是 Key 是数字罢了，自然也可以通过Object.defineProperty 来实现数组的下标访问和赋值拦截了。其实 Vue2.x 没有实现数组的全方位监听主要有两方面原因：

数组和普通对象相比，JS 数组太"多变"了。比如： arr.length=0 ，可以瞬间清空一个数组; arr[100]=1 又可以瞬间将一个数组的长度变为 100(其他位置用空元素填充)，等等骚操作。对于一个普通对象，我们一般只会改变 Key 对应的 Value 值，而不会连key都改变了,而数组就不一样了 Key 和 Value 都经常增加或减少，因此每次变化后我们都需要重新将整个数组的所有 key 递归的使用 Object.defineProperty 加上 setter 和 getter，同时我们还要穷举每一种数组变化的可能，这样势必就会带来性能开销问题，有的人会觉得这点性能开销算个 x 呀，但是性能问题都是由小变大的，如果数组中存的数据量大而且操作频繁时，这就会是一个大问题。React16.x 在就因为在优化 textNode 的时候，移除了无意义的 span 标签，性能据说都提升了多少个百分点，所以性能问题不可小看。

数组在应用中经常会被操作，但是通常 push,pop,shift,unshift,splice,sort,reverse 这 7 种操作就能达到目的。因此，出于性能方面的考虑 Vue2.x 做出了一定的取舍。

那么 Vue3.0 怎么又走回头路去实现了数组的全面监听了呢?答案就是 Proxy 和 Reflet 这一对原生 CP 的出现，Vue3.0 使用 Proxy 作为响应式数据实现的核心，用 Proxy 返回一个代理对象，通过代理对象来收集依赖和触发更新。大概的原理像这段代码一样：

const arr = ["2019","云","栖","音","乐","节"]; 
let ProxyArray = new Proxy(arr,{ 
    get:function(target, name, value, receiver) { 
        console.log("取值") 
        return Reflect.get(target,name); 
    }, 
    set: function(target, name, value, receiver) { 
       console.log("赋值") 
       Reflect.set(target,name, value, receiver);; 
    } 
 }) 
 const index = ProxyArray[0]; 
 //取值 
 ProxyArray[0]="2050" 
 //赋值 

效果和 Object.defineProperty 一样一样的，又显得清新脱俗有没有?而且 Proxy 只要是对象都能代理，后面还会提到。当然 Vue3.0 是虽然有了新欢，但也没忘记旧爱，对于在之前版本中数组的几种方法的监听还是照样支持的。

惰性监听

什么是"惰性监听"?

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!