vue 3.0はなぜproxyを使って双方向結合を実現しますか?

前言
vue 3.0 bateの発表に従って、私達は双方向結合の実現方法を知っています.vue 2.0のes 5のアクセス属性Object.definePropertyからes 6のproxyに変更しました.クラスメートはなぜproxyに変更したのか、proxyにはどのようなメリットがありますか?
目次

クライテリア

、proxy比較Object.defineProperty

Proxyの優勢は以下の通りです.

Object.definePropertyの利点は以下の通りである.

、proxy傍受対象の簡単な実現

エージェントオブジェクトは簡単に

を実現する.

handler.set()方法

ハンドル・ゲット()

、Object.definePropertyモニタオブジェクトの簡単な実現

、まとめ

1、proxy比較Object.defineProperty
Proxyの強みは以下の通りです.
1、Proxyは属性ではなく対象を直接傍受することができる.2、Proxyは配列の変化を直接傍受できます.3、Proxyには13種類のブロック方法があり、appy、ownKeys、deleteProperty、hasなどは4、Object.definePropertyに限らない.5、Proxyが戻ってきたのは新しいオブジェクトで、新しいオブジェクトだけを操作して目的に達することができます.Object.definePropertyはオブジェクト属性を巡回して直接修正することしかできません.6、Proxyは新基準として、ブラウザメーカーの重点持続的な性能最適化、すなわち伝説的な新標準の性能配当を受ける.
Object.definePropertyの利点は以下の通りです.
1、互換性がよくて、IE 9をサポートしますが、Proxyはブラウザ互換性の問題があります.そしてpolyfillを使って平らにすることができません.だからVueの作者は次の大きいバージョン(3.0)でないとProxyで書き換えることができないと宣言しました.
2、proxy傍受対象者の簡単な実現
プロキシオブジェクトを簡単に実現

//        
let data = {
     }
//      Proxy ,   data       
let proxy = new Proxy(data, {
     })
//   Proxy      name  
proxy.name = '  '
console.log(proxy) // { name: '  ' }
console.log(data) // { name: '  ' }

知識点を補充する:Reflect
ReflectオブジェクトはProxyオブジェクトと同じで、ES 6がオブジェクトを操作するために提供する新しいAPIです.私たちはhandle.set()の中でreturnのReflect.set(…argments)を対象として付与する必要があります.
Reflect.set Reflect.setメソッドは、targtオブジェクトのname属性がvalueに等しいように設定されています.name属性が賦値関数を設定している場合、赋値関数のthisバインディングreceiverが与えられます.
Reflect.get Reflect.getメソッドは、オブジェクトのname属性を検索してタレッジに戻ります.この属性がない場合は、undefinedに戻ります.
handler.set方法
属性設定操作のキャプチャーです.

//       
let data = {
     
  name: '  ',
  age: '23',
}
//      Proxy ,   data       
let p = new Proxy(data, {
     
  // target =     
  // prop =      
  // value =      
  set(target, prop, value) {
     
    console.log(target, prop, value) // { name: '  ', age: '24' } 'age' 18
    //  Reflect    
    return Reflect.set(...arguments)
  },
})
//     p    
p.age = 18
console.log(data) // { name: '  ', age: '18' }

handler.get()
属性読み出し動作のキャプチャーです.

let data = {
     
  name: '  ',
  age: '24',
}

let p = new Proxy(data, {
     
  // target =     
  // prop =      
  get(target, prop) {
     
    console.log(target, prop) // { name: '  ', age: '24' } 'age'
    //     Reflect.get           
    return Reflect.get(...arguments)
  },
})
console.log(p.age) // 24

3、Object.definePropertyの傍受対象の簡単な実現

var o = {
     } //        
//                      
var bValue = 38
Object.defineProperty(o, 'bValue', {
     
  get() {
     
    return bValue
  },
  set(newValue) {
     
    console.log('set==>', newValue)
    bValue = newValue
  },
})
//         bValue   get  ,  ，   o    bValue   38
console.log(o.bValue) // 38
//         bValue   set  ，  bValue   ，   get  ，   o    bValue   40
o.bValue = 40
console.log(o.bValue) // 40

4、まとめ
1、es 6 proxy代理器はes 5 Object.definePropertyと比較して、機能がより強く、方法が超多く提供されました.代理方法2、どうしてvue 3.0はes 6のproxyを使っていますか?2.0ではないです.SE 6は一部のブラウザでは互換性がないため、ieのような低いバージョンです.主流のブラウザのほとんどが互換性がある場合にのみ使用されます.
デリバティブ読書:手書きvs 3.0双方向バインディング-s 6 Proxy
この文章の内容が皆さんの役に立つことを望みます.