成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用Proxy實(shí)現(xiàn)雙向綁定

Yang_River / 3345人閱讀

摘要：取出所有屬性遍歷不允許綁定在非對(duì)象上進(jìn)行數(shù)組操作時(shí)，會(huì)進(jìn)行兩次一次數(shù)據(jù)改變，一次改變，兩次改變的值是不變，因此不應(yīng)該多分發(fā)一次消息通知訂閱者

前言：vue3.0要用Proxy來(lái)實(shí)現(xiàn)雙向綁定，因此先來(lái)嘗試一下實(shí)現(xiàn)方法。

1 Object.defineProperty 實(shí)現(xiàn)
原來(lái)vue2的實(shí)現(xiàn)使用Object.defineProperty，監(jiān)聽(tīng)set，但對(duì)于數(shù)組直接下標(biāo)給數(shù)組設(shè)置值監(jiān)聽(tīng)不了。

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

2 使用Proxy實(shí)現(xiàn)

使用Proxy實(shí)現(xiàn)原理主要是new一個(gè)Proxy對(duì)象，代理你的data值，需要注意的一點(diǎn)是，對(duì)于數(shù)組的方法操作來(lái)說(shuō)，會(huì)產(chǎn)生兩次賦值操作，一次是添加值，一次是改變他的length值，而對(duì)于Object.defineProperty監(jiān)聽(tīng)不到的數(shù)組下標(biāo)給數(shù)組設(shè)置值，Proxy是可以監(jiān)聽(tīng)到的。

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

function defineReactive(data) {
  return new Proxy(data, {
    set(target, key, value, proxy) {
        // 進(jìn)行數(shù)組操作時(shí)，會(huì)進(jìn)行兩次set 一次數(shù)據(jù)改變，一次length改變，兩次改變data的值是不變，因此不應(yīng)該多分發(fā)一次消息
      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;
    }
  });

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102694.html

相關(guān)文章

  • 使用 Proxy 實(shí)現(xiàn)簡(jiǎn)單的 MVVM 模型

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

    BetaRabbit 評(píng)論0 收藏0

  • 使用 Proxy 實(shí)現(xiàn)簡(jiǎn)單的 MVVM 模型

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

    MarvinZhang 評(píng)論0 收藏0

  • Vue3.0數(shù)據(jù)雙向綁定Proxy探究

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

    stormzhang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<