vue2.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,預設都是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,預設都是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();
  }
})

vue3.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,value,receiver){
      // return Reflect.set(target,value);
      // return target[key] = value
      target[key] = value;
      self.render();
    }
  })
}

Proxy 用途 -- 校驗型別 -- 真正的私有變數

Diff演算法和virtua doml

//1-物件 2-屬性 3-對於屬性的一系列配置

以上就是小編給大家整理的全部相關知識點，感謝大家的學習如果有任何疑問可以聯絡我們小編。