淺析vue資料綁定

前言：最近團隊需要做一個分享，腳進腦子，不知如何分享。最後想著之前一直想研究一下 vue 源碼，今天剛好 “藉此機會” 研究一下。

網上研究vue資料綁定的文章已經非常多了，但是自己寫一遍，敲一遍demo和看別人的文章是完全不同的，so…搬運工來了

目前資料綁定主要有以下三種實作方式：

1.   髒值檢查（angular.js）    輪詢偵測資料變化

DOM事件，如使用者輸入文字，譬如使用者輸入文字，點選按鈕等。 ( ng-click )

XHR回應事件( $http )

瀏覽器Location變更事件( $location )

Timer事件( $timeout , $interval )

執​​行$digest() 或$ 2、Object.defineProperty劫持物件的get、set，從而實現資料的監控。 （vue）

3、發布/訂閱者模式實現資料與視圖的自動同步

Object.defineProperty的優點

「髒值偵測」－資料發生變更後，對於所有的資料和視圖的綁定關係進行一次檢測，識別是否有數據發生了改變，有變化進行處理，可能進一步引發其他數據的改變，所以這個過程可能會循環幾次，一直到不再有數據變化發生後，將變更的數據發送到視圖，更新頁面展現

Object.defineProperty() 監控對資料的操作，可自動觸發資料同步。並且，由於是在不同的資料上觸發同步，可以精確的將變更發送給綁定的視圖，而不是對所有的資料都執行一次檢測。

Object.defineProperty的用法

var a = {};

Object.defineProperty(a, "b", {

 set: function (newValue) {

 console.log("我被赋值了！" + newValue);

 },

 get: function () {

 console.log("我被取值了！");

 return 2
 }
})

a.b = 3; //我被赋值了！

console.log(a.b); //我被取值了! //打印 2

由上面的例子看出，Object.defineProperty  傳人3個參數

第一個： a物件

第二個物件個： 屬性比較多，列舉有用的value，set，get，configurable

資料綁定原理：

1、實作一個資料監聽器Observer，對資料物件的所有屬性進行監聽，如有變動則拿到最新值並通知dep數組

2、實作一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換資料

3、實作一個dep數組，能夠訂閱並收到每個屬性變動的通知，執行指令綁定的對應回呼函數，更新視圖

1. 實作observer

var data = {name: 'beidan'};

observe(data);

data.name = 'test'; // 监听到值变化了 beidan 变成 test

function observe(data) {

 if (!data || typeof data !== 'object') {

 return;

 }

 // 取出所有属性遍历

 Object.keys(data).forEach(function(key) {

  defineReactive(data, key, data[key]);

 });
}

function defineReactive(data, key, val) {


 Object.defineProperty(data, key, {

 enumerable: true, // 可枚举

  configurable: false, // 不能再define
  get: function() {
 
   return val;

  },

  set: function(newVal) {
 
   console.log('监听到值变化了 ', val, ' 变成 ', newVal);

   val = newVal;

  }

 });
}

2. 維護一個陣列

function Dep() {

 this.subs = [];
}

Dep.prototype = {

 addSub: function (sub) {

 this.subs.push(sub);

 },

 notify: function (val) {

  this.subs.forEach(function (sub) {
 
  sub.update(val)

 });

}
};
function defineReactive(data, key, val) {
 Object.defineProperty(data, key, {
 ……
 set: function(newVal) {
  if (val === newVal) return;
  console.log('监听到值变化了 ', val, ' 变成 ', newVal);
  val = newVal;
  dep.notify(val); // 通知所有订阅者
 }
 });
}

  

內容，希望本文的內容對大家的學習或工作能帶來一定的幫助，同時也希望多多支持PHP中文網！

更多淺析vue資料綁定相關文章請關注PHP中文網！