vueデータ応答式原理知識点のまとめ

vue 2.0データ応答式の原理
オブジェクト
Obect.defineproperty定義対象の属性mjm
definepropertyはコアのオブジェクトのためにデータを双方向に結合するのではなく、オブジェクトに属性ラベルを作成し、一連の操作権限を設定します。属性の中のgetとsetだけが応答式を実現しました。

var ob = {
  a: 1,
  b: 2
}
//1-   2-   3-          
Object.defineProperty(ob, 'a' , { //a    ob       ,,    true
  writable: false,
  enumerable: false,
  configurable: false
})
ob.a = 3
console.log(Object.getOwnPropertyDescriptor(ob, 'a'))
console.log(ob.a) //1

var ob = {
  a: 1,
  b: 2
}

//1-   2-   3-          
/**
 * vue      
 *  ob a    get/set  ，   ob a ，   get  ，  ob a ，   set  
 */
Object.defineProperty(ob, 'a' , { //a    ob       ,,    true
  get: function(){
    console.log('a- get') 
  },
  set: function(){
    console.log('a- set')

  }
})
ob.a = 3
console.log(ob.a) 

//    ，，，    ，   

var ob = {
  a: 1,
  b: 2
}

//1-   2-   3-          
/**
 * vue      
 *  ob a    get/set  ，   ob a ，   get  ，  ob a ，   set  
 */
var _value = ob.a //_value       
Object.defineProperty(ob, 'a' , { //a    ob       ,,    true
  get: function(){
    console.log('a- get') 
    return _value;
  },
  set: function(newValue){
    console.log('a- set')
    _value = newValue;
  }
})
ob.a = 3
console.log(ob.a) //get    return ，    undefined

defineProperty定義のgetとsetは対象の属性ですが、配列はどうなりますか？
デコレーションモードを作りました。

/**
 *     Object.create()                        。
 *                            ，               。
 *     Object.create(proto, [ propertiesObject ])
 */
//   --         
var arraypro = Array.prototype;
var arrob = Object.create(arraypro)
var arr = ['push', 'pop', 'shift']; //     ，vue     
arr.forEach((method, index)=>{
  arrob[method] = function(){
    var ret = arraypro[method].apply(this,arguments);
    dep.notify();
  }
})

vue 3.0データ応答式の原理-Proxy
Proxyオブジェクトは、基本的な動作を定義するために使用されるカスタム行為で、いくつかの動作のデフォルトの動作を修正することは、言語レベルでの修正に等しいので、「メタプログラミング」（meta programming）に属し、つまりプログラミング言語をプログラミングする。
definePropertyと似ています。機能はほぼ同じですが、使い方は違います。

      Procy？
  1、defineProperty        ，        
  2、       for in     
  3、      ，               

   observer：

vue.prototype.observer = function(obj){ //  get/set  
  var self = this;
  this.$data = new Proxy(this.$data, {
    get: function(target, key, receiver){
      return target[key]
    },
    set: function(target, key, value, receiver){
      // return Reflect.set(target, key, value);
      // return target[key] = value
      target[key] = value;
      self.render();
    }
  })
}

Proxy用途--検証タイプ--本当のプライベート変数
Diffアルゴリズムとvirtua doml
//1-オブジェクト2-属性3-属性に関する一連の構成
以上は小编がみんなに整理したすべての関连している知识の点です。ありがとうございます。もし何か疑问があれば、私たち小编に连络してください。