茶余饭后聊聊 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 是固然有了新欢，但也没健忘旧爱，对付在之前版本中数组的几种要领的监听照旧照样支持的。

惰性监听

什么是"惰性监听"?

（编辑：湖南网）

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