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

資訊專欄INFORMATION COLUMN

數(shù)據(jù)劫持與數(shù)據(jù)代理

468122151 / 3007人閱讀

摘要：數(shù)據(jù)劫持?jǐn)?shù)據(jù)劫持即使用實(shí)現(xiàn)了的雙向綁定。不輸出內(nèi)容數(shù)據(jù)代理即代理的意思。的攔截處理器除了外還支持多種攔截方式，具體請查閱官方文檔嵌套查詢。實(shí)際上也是不支持嵌套查詢的。

數(shù)據(jù)劫持

數(shù)據(jù)劫持即使用Object.defineProperty()實(shí)現(xiàn)了vue的雙向綁定。先來看看它是如何實(shí)現(xiàn)的

let obj = {}, txt = ""
Object.defineProperty(obj,"txt",{
    set(val) {
    
        console.log("set ....")
        txt = val || "";
    },
    get() {
        //獲取obj.txt時會觸發(fā)get的回調(diào)。
        console.log("get ....")
        return txt
    }
})

Object.defineProperty的缺點(diǎn)
1、無法監(jiān)聽到數(shù)組的變化
舉個例子

//當(dāng)被監(jiān)聽的屬性是數(shù)組時
let arr = [1,2,3]
let obj = {}
Object.defineProperty(obj,"arr",{
    set(val) {
        console.log("set",val)
        arr = val
    },
    get() {
        console.log("get")
        return arr
    }
})
obj.arr.push(4) // get 實(shí)際上是改變arr的值但是卻沒有執(zhí)行set而是執(zhí)行了get
obj.arr = [1,2,3,4] // 執(zhí)行了set

當(dāng)被監(jiān)聽的屬性是數(shù)組，這幾個方法push、pop、shift、unshift、splice、sort、reverse不會觸發(fā)set。vue將這幾個修改原始的數(shù)組的方法稱為變異方法

2、必須遍歷對象的每一個屬性

Object.keys(obj).forEach(key=>{
    Object.defineProperty(obj,key,{
        //....
    })
})

3、必須深層遍歷嵌套對象

let person = {
    name:{
        firstName:"chan",
        lastName:"louis"
    }
}
當(dāng)遇到變異方法時舊版本的vue通過重寫方法來進(jìn)行數(shù)據(jù)劫持 
const aryMethods = ["push", "pop", "shift", "unshift", "splice", "sort", "reverse"];
const arrayAugmentations = [];
aryMethods.forEach((method)=> {
  // 這里是原生 Array 的原型方法
  let original = Array.prototype[method];
  // 將 push, pop 等封裝好的方法定義在對象 arrayAugmentations 的屬性上
  // 注意：是實(shí)例屬性而非原型屬性
  arrayAugmentations[method] = function () {
    console.log("has change");
    // 調(diào)用對應(yīng)的原生方法并返回結(jié)果
    return original.apply(this, arguments);
  };
});
let list = ["a", "b", "c"];
// 將我們要監(jiān)聽的數(shù)組的原型指針指向上面定義的空數(shù)組對象
// 這樣就能在調(diào)用 push, pop 這些方法時走進(jìn)我們剛定義的方法，多了一句 console.log
list.__proto__ = arrayAugmentations;
list.push("d");  // 我被改變啦！
// 這個 list2 是個普通的數(shù)組，所以調(diào)用 push 不會走到我們的方法里面。
let list2 = ["a", "b", "c"];
list2.push("d");  // 不輸出內(nèi)容
Proxy數(shù)據(jù)代理

proxy即代理的意思。個人理解，建立一個proxy代理對象（Proxy的實(shí)例），接受你要監(jiān)聽的對象和監(jiān)聽它的handle兩個參數(shù)。當(dāng)你要監(jiān)聽的對象發(fā)生任何改變，都會被proxy代理攔截來滿足需求。

var arr = [1,2,3]
var handle = {
    //target目標(biāo)對象 key屬性名 receiver實(shí)際接受的對象
    get(target,key,receiver) {
        console.log(`get ${key}`)
        // Reflect相當(dāng)于映射到目標(biāo)對象上
        return Reflect.get(target,key,receiver)
    },
    set(target,key,value,receiver) {
        console.log(`set ${key}`)
        return Reflect.set(target,key,value,receiver)
    }
}
//arr要攔截的對象，handle定義攔截行為
var proxy = new Proxy(arr,handle)
proxy.push(4) //可以翻到控制臺測試一下會打印出什么

1、使用proxy可以解決defineProperty不能監(jiān)聽數(shù)組的問題，避免重寫數(shù)組方法；
2、不需要再遍歷key。
3、Proxy handle的攔截處理器除了get、set外還支持多種攔截方式，具體請查閱官方文檔（https://developer.mozilla.org...）
4、嵌套查詢。實(shí)際上proxy get()也是不支持嵌套查詢的。解決方法：

let handler = {
  get (target, key, receiver) {
    // 遞歸創(chuàng)建并返回
    if (typeof target[key] === "object" && target[key] !== null) {
      return new Proxy(target[key], handler)
    }
    return Reflect.get(target, key, receiver)
  }
}

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

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

相關(guān)文章

  • ES6-Proxy與數(shù)據(jù)劫持(12)

    摘要：我們先以框架出發(fā)，探索其中數(shù)據(jù)劫持的奧秘。針對對象在數(shù)據(jù)劫持這個問題上，可以被認(rèn)為是的升級版。技術(shù)支持監(jiān)測數(shù)組的等方法操作，支持對象屬性的動態(tài)添加和刪除，極大的簡化了響應(yīng)化的代碼量。 隨著前端界的空前繁榮，各種框架橫空出世，包括各類mvvm框架百家爭鳴，比如Anglar、Vue、React等等，它們最大的優(yōu)點(diǎn)就是可以實(shí)現(xiàn)數(shù)據(jù)綁定，再也不需要手動進(jìn)行DOM操作了，它們實(shí)現(xiàn)的原理也基本上是...

    li21 評論0 收藏0

  • 中間件增強(qiáng)框架之InterceptFramework

    摘要：攔截之前的準(zhǔn)備在應(yīng)用啟動的特定生命周期內(nèi)改寫字節(jié)碼，植入特定的邏輯處理代碼進(jìn)行攔截。劫持通過字節(jié)碼改寫動態(tài)代理等技術(shù)，在客戶端調(diào)用代碼中嵌入特定處理邏輯，獲取調(diào)用相關(guān)的信息，如調(diào)用地址調(diào)用協(xié)議調(diào)用結(jié)果等。 這次我們?yōu)榇蠹規(guī)碇虚g件增強(qiáng)框架專題（MOF）的最后一篇文章，為大家講解MOF中的InterceptFramework框架。該框架可以在應(yīng)用啟動過程中獲取畫像信息，實(shí)現(xiàn)應(yīng)用畫像數(shù)據(jù)采...

    chnmagnus 評論0 收藏0

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

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

    stormzhang 評論0 收藏0

  • 了解MVVM及Vue實(shí)現(xiàn)原理，手把手帶你擼源碼。

    摘要：方法實(shí)現(xiàn)將所有屬性掛載在觀察對象，將每一項做一個數(shù)據(jù)劫持就是將中每一項用定義新屬性并返回這個對象。當(dāng)和發(fā)生變化時，自動會觸發(fā)視圖更新，獲取得到的也就是最新值。 MVVM及Vue實(shí)現(xiàn)原理 Github源碼地址：https://github.com/wyj2443573... mvvm 雙向數(shù)據(jù)綁定數(shù)據(jù)影響視圖，視圖影響數(shù)據(jù)angular 臟值檢測 vue數(shù)據(jù)劫持+發(fā)布訂閱模式vue 不...

    cooxer 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<