使用Proxy實現雙向綁定

Yang_River 發布于2019-08-23 16:06 / 3338人閱讀

摘要：取出所有屬性遍歷不允許綁定在非對象上進行數組操作時，會進行兩次一次數據改變，一次改變，兩次改變的值是不變，因此不應該多分發一次消息通知訂閱者

前言：vue3.0要用Proxy來實現雙向綁定，因此先來嘗試一下實現方法。

1 Object.defineProperty 實現
原來vue2的實現使用Object.defineProperty，監聽set，但對于數組直接下標給數組設置值監聽不了。

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) {
  observe(val); // 監聽子屬性
  Object.defineProperty(data, key, {
      enumerable: true, // 可枚舉
      configurable: false, // 不能再重寫defineProperty
      get: function() {
          return val;
      },
      set: function(newVal) {
          console.log("-------通知訂閱者--------")
          val = newVal;
      }
  });
}

2 使用Proxy實現

使用Proxy實現原理主要是new一個Proxy對象，代理你的data值，需要注意的一點是，對于數組的方法操作來說，會產生兩次賦值操作，一次是添加值，一次是改變他的length值，而對于Object.defineProperty監聽不到的數組下標給數組設置值，Proxy是可以監聽到的。

function observe(data) {
    if (!data || typeof data !== "object") {
        return;
    }
    // 取出所有屬性遍歷
    Object.keys(data).forEach(function(_k) {
        // Proxy不允許綁定在非對象上
        if (data[_k] && typeof data[_k] === "object") {
            data[_k] = defineReactive(data[_k]);
        }
    });
}

function defineReactive(data) {
  return new Proxy(data, {
    set(target, key, value, proxy) {
        // 進行數組操作時，會進行兩次set 一次數據改變，一次length改變，兩次改變data的值是不變，因此不應該多分發一次消息
      if (
        Object.prototype.toString.call(data) === "[object Array]" &&
        key === "length"
      ) {
        Reflect.set(target, key, value, proxy);
        return true;
      }
      observe(data);
      Reflect.set(target, key, value, proxy);
      console.log("-------通知訂閱者--------")
      return true;
    }
  });

云服務器 GPU云服務器雙向綁定雙向數據綁定 js雙向綁定 js雙向數據綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102694.html

使用 Proxy 實現簡單的 MVVM 模型

摘要：綁定實現的歷史綁定的基礎是事件。但臟檢查機制隨之帶來的就是性能問題。是谷歌對于簡化雙向綁定機制的嘗試，在中引入。掙扎了一段時間后谷歌團隊宣布收回的提議，并在中完全刪除了實現。自然全軍覆沒其他各大瀏覽器實現的時間也較晚。綁定實現的歷史綁定的基礎是 propertyChange 事件。如何得知 viewModel 成員值的改變一直是開發 MVVM 框架的首要問題。主流框架的處理有一下三...

BetaRabbit 2019-08-01 17:17 評論0 收藏0
使用 Proxy 實現簡單的 MVVM 模型

摘要：綁定實現的歷史綁定的基礎是事件。但臟檢查機制隨之帶來的就是性能問題。是谷歌對于簡化雙向綁定機制的嘗試，在中引入。掙扎了一段時間后谷歌團隊宣布收回的提議，并在中完全刪除了實現。自然全軍覆沒其他各大瀏覽器實現的時間也較晚。綁定實現的歷史綁定的基礎是 propertyChange 事件。如何得知 viewModel 成員值的改變一直是開發 MVVM 框架的首要問題。主流框架的處理有一下三...

MarvinZhang 2019-08-20 18:26 評論0 收藏0
Vue3.0數據雙向綁定Proxy探究

摘要：只能劫持對象的屬性因此我們需要對每個對象的每個屬性進行遍歷。屬性對于怎么拼接到和上面說到了怎么使用做數據劫持，怎么結合訂閱發布，請結合數據雙向綁定探究對照著數據劫持的部分去替換看一下。前言 2018年11月16日，關注vue的人都知道這個時間點發生了什么事兒吧。vue3.0更新內容研究數據雙向綁定的大佬們都在開始猜測這個新機制了，用原生Proxy替換Object.definePro...

stormzhang 2019-08-23 14:07 評論0 收藏0