vue2.x中如何監測數組和對象變化?Proxy比Object.defineProperty好在哪?

vue2.x中如何監測數組和對象變化?

• Object通過Object.defineProperty結合遞歸就能實現

  • 比較麻煩就對了,Proxy就直接代理整個對象

• Array的話 Vue將data中的數組進行了原型鏈重寫，指向了自己定義的數組原型方法。

• 數組某些情況下會不刷新視圖,我們這樣解決

  • 當利用索引直接設置一個數組項時，例如vm.items[indexOfItem] = newValue

  //使用該方法進行更新視圖 // vm.$set，Vue.set的一個別名 vm.$set(vm.items, indexOfItem, newValue) 復制代碼

  • 當修改數組的長度時，例如vm.items.length = newLength

  //使用該方法進行更新視圖 // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)

Proxy比Object.defineProperty好在哪?

「Vue3.x改用Proxy替代Object.defineProperty」

• Object.defineProperty 只能劫持對象屬性的getter和setter方法

  • Proxy 是直接代理劫持整個對象

• Object.definedProperty 不支持數組(可以監聽數組,不過數組方法無法監聽自己重寫)，更准確的說是不支持數組的各種API(所以VUE重寫了數組方法

  • Proxy可以直接監聽對象和數組的變化，並且有多達13種攔截方法。

• Proxy 會返回一個代理對象，我們只需要操作新對象即可，而 Object.defineProperty 只能遍歷對象屬性直接修改

• Object.definedProperty唯一比Proxy好的一點就是兼容性,不過相信Proxy新標准將受到瀏覽器廠商重點持續的性能優化