成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

stormzhang / 1951人閱讀

摘要：只能劫持對(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.defineProperty

1. 為什么要替換Object.defineProperty

替換不是因?yàn)椴缓?，是因?yàn)橛懈玫姆椒ㄊ褂眯矢?/strong>

Object.defineProperty的缺點(diǎn)：

在Vue中，Object.defineProperty無(wú)法監(jiān)控到數(shù)組下標(biāo)的變化，導(dǎo)致直接通過(guò)數(shù)組的下標(biāo)給數(shù)組設(shè)置值，不能實(shí)時(shí)響應(yīng)。為了解決這個(gè)問(wèn)題，經(jīng)過(guò)vue內(nèi)部處理后可以使用以下幾種方法來(lái)監(jiān)聽(tīng)數(shù)組。有關(guān)于這個(gè)說(shuō)明，可以看看這個(gè)文章 vue為什么不能檢測(cè)數(shù)組變動(dòng)

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

目前只針對(duì)以上方法做了hack處理，所以恰數(shù)組屬性是檢測(cè)不到的，有局限性。

Object.defineProperty只能劫持對(duì)象的屬性,因此我們需要對(duì)每個(gè)對(duì)象的每個(gè)屬性進(jìn)行遍歷。Vue里，是通過(guò)遞歸以及遍歷data對(duì)象來(lái)實(shí)現(xiàn)對(duì)數(shù)據(jù)的監(jiān)控的，如果屬性值也是對(duì)象那么需要深度遍歷,顯然如果能劫持一個(gè)完整的對(duì)象，不管是對(duì)操作性還是性能都會(huì)有一個(gè)很大的提升。
而要取代它的Proxy有以下兩個(gè)優(yōu)點(diǎn)：

1. 可以劫持整個(gè)對(duì)象，并返回一個(gè)新對(duì)象
2. 有13種劫持操作

2. 什么是Proxy 
Proxy是 ES6 中新增的一個(gè)特性，翻譯過(guò)來(lái)意思是"代理"，用在這里表示由它來(lái)“代理”某些操作。 Proxy 讓我們能夠以簡(jiǎn)潔易懂的方式控制外部對(duì)對(duì)象的訪問(wèn)。其功能非常類似于設(shè)計(jì)模式中的代理模式。

Proxy 可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問(wèn)，都必須先通過(guò)這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問(wèn)進(jìn)行過(guò)濾和改寫。

使用 Proxy 的核心優(yōu)點(diǎn)是可以交由它來(lái)處理一些非核心邏輯（如：讀取或設(shè)置對(duì)象的某些屬性前記錄日志；設(shè)置對(duì)象的某些屬性值前，需要驗(yàn)證；某些屬性的訪問(wèn)控制等）。 從而可以讓對(duì)象只需關(guān)注于核心邏輯，達(dá)到關(guān)注點(diǎn)分離，降低對(duì)象復(fù)雜度等目的。

基本用法：

let p = new Proxy(target, handler);

參數(shù)：

target: 是用Proxy包裝的被代理對(duì)象（可以是任何類型的對(duì)象，包括原生數(shù)組，函數(shù)，甚至另一個(gè)代理）。
handler: 是一個(gè)對(duì)象，其聲明了代理target 的一些操作，其屬性是當(dāng)執(zhí)行一個(gè)操作時(shí)定義代理的行為的函數(shù)。

p是Proxy對(duì)象，當(dāng)其他操作對(duì)p進(jìn)行更改的時(shí)候，會(huì)執(zhí)行handler對(duì)象的方法。Proxy有13種數(shù)據(jù)劫持的操作，常用的handler處理方法：

get: 讀取值，
set: 獲取值，
has: 判斷對(duì)象是否擁有該屬性，
construct: 構(gòu)造函數(shù)

給個(gè)例子：

let obj = {};
 let handler = {
   get(target, property) {
    console.log(`${property} 被讀取`);
    return property in target ? target[property] : 3;
   },
   set(target, property, value) {
    console.log(`${property} 被設(shè)置為 ${value}`);
    target[property] = value;
   }
 }

 let p = new Proxy(obj, handler);
 p.name = "tom" //name 被設(shè)置為 tom
 p.age; //age 被讀取 3

更多的Proxy屬性方法參考MDN Proxy

3. Proxy實(shí)現(xiàn)數(shù)據(jù)劫持 
observe(data) {
  const that = this;
  let handler = {
   get(target, property) {
      return target[property];
    },
    set(target, key, value) {
      let res = Reflect.set(target, key, value);
      that.subscribe[key].map(item => {
        item.update();
      });
      return res;
    }
  }
  this.$data = new Proxy(data, handler);
}

這段代碼里把代理器返回的對(duì)象代理到this.$data，即this.$data是代理后的對(duì)象，外部每次對(duì)this.$data進(jìn)行操作時(shí)，實(shí)際上執(zhí)行的是這段代碼里handler對(duì)象上的方法。
注：這兒用到了reflect屬性，這也是ES6里面的，不知道的去這兒看看吧。reflect屬性

4. 對(duì)于怎么拼接到watcher和compile

上面說(shuō)到了怎么使用Proxy做數(shù)據(jù)劫持，怎么結(jié)合訂閱發(fā)布，請(qǐng)結(jié)合 vue2.0數(shù)據(jù)雙向綁定探究 對(duì)照著Object.defineProperty
數(shù)據(jù)劫持的部分去替換看一下。其他的設(shè)計(jì)思想估計(jì)跟之前的八九不離十。

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

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

相關(guān)文章

  • 學(xué)習(xí)MVVM及框架的雙向綁定筆記

    摘要：的數(shù)據(jù)劫持版本內(nèi)部使用了來(lái)實(shí)現(xiàn)數(shù)據(jù)與視圖的雙向綁定，體現(xiàn)在對(duì)數(shù)據(jù)的讀寫處理過(guò)程中。這樣就形成了數(shù)據(jù)的雙向綁定。 MVVM由以下三個(gè)內(nèi)容組成 View：視圖模板 Model：數(shù)據(jù)模型 ViewModel：作為橋梁負(fù)責(zé)溝通View和Model，自動(dòng)渲染模板 在JQuery時(shí)期，如果需要刷新UI時(shí)，需要先取到對(duì)應(yīng)的DOM再更新UI，這樣數(shù)據(jù)和業(yè)務(wù)的邏輯就和頁(yè)面有強(qiáng)耦合。 在MVVM中，U...

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

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

    摘要：取出所有屬性遍歷不允許綁定在非對(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)不了。...

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

  • Vue數(shù)據(jù)響應(yīng)式原理筆記 就幾行沒(méi)啥可看的

    摘要：什么是數(shù)據(jù)響應(yīng)式數(shù)據(jù)響應(yīng)式既數(shù)據(jù)雙向綁定，就是把綁定到，當(dāng)我們用代碼更新時(shí)，就會(huì)自動(dòng)更新如果用戶更新了的數(shù)據(jù)也自動(dòng)本更新。數(shù)據(jù)響應(yīng)式的原理實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式的原理就是利用了這個(gè)方法重新定義了對(duì)象獲取屬性值和設(shè)置屬性值的操作來(lái)實(shí)現(xiàn)。 1、什么是數(shù)據(jù)響應(yīng)式 數(shù)據(jù)響應(yīng)式既數(shù)據(jù)雙向綁定，就是把Model綁定到View，當(dāng)我們用JavaScript代碼更新Model時(shí)，View就會(huì)自動(dòng)更新；如果用戶...

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

  • 初識(shí)Proxy、Reflect

    摘要：主要原因應(yīng)該是在處理數(shù)組響應(yīng)是會(huì)存在缺陷。構(gòu)造函數(shù)其中表示生成一個(gè)實(shí)例，為需要代理的對(duì)象，則是一個(gè)對(duì)象，定義了各種代理行為。對(duì)于滿足條件的屬性以及其他屬性，直接保存報(bào)錯(cuò)報(bào)錯(cuò)攔截的操作，返回一個(gè)布爾值。 前言 https://segmentfault.com/a/11... Vue3.0應(yīng)該馬上就要發(fā)布正式版了。聽(tīng)說(shuō)在新版本中，Proxy取代了Object.defineProperty進(jìn)...

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

  • 精讀《Vue3.0 Function API》

    摘要：拿到的都是而不是原始值，且這個(gè)值會(huì)動(dòng)態(tài)變化。精讀對(duì)于的與，筆者做一些對(duì)比。因此采取了作為優(yōu)化方案只有當(dāng)?shù)诙€(gè)依賴參數(shù)變化時(shí)才返回新引用。不需要使用等進(jìn)行性能優(yōu)化，所有性能優(yōu)化都是自動(dòng)的。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言 Vue 3.0 的發(fā)布引起了軒然大波，讓我們解讀下它的 function api RFC 詳細(xì)了解一下 Vue 團(tuán)隊(duì)是怎么想的吧！ 首先官方回答了幾個(gè)最受關(guān)注的...

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

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

0條評(píng)論

閱讀需要支付1元查看
<