Vue3.0里為什麼要用 Proxy API 替代 defineProperty API ?

来源:https://www.cnblogs.com/smileZAZ/p/18054957
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、Object.defineProperty 定義:Object.defineProperty() 方法會直接在一個對象上定義一個新屬性,或者修改一個對象的現有屬性,並返回此對象 為什麼能實現響應式 通過defineProperty 兩 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

 

一、Object.defineProperty

定義:Object.defineProperty() 方法會直接在一個對象上定義一個新屬性,或者修改一個對象的現有屬性,並返回此對象

為什麼能實現響應式

通過defineProperty 兩個屬性,getset

  • get

屬性的 getter 函數,當訪問該屬性時,會調用此函數。執行時不傳入任何參數,但是會傳入 this 對象(由於繼承關係,這裡的this並不一定是定義該屬性的對象)。該函數的返回值會被用作屬性的值

  • set

屬性的 setter 函數,當屬性值被修改時,會調用此函數。該方法接受一個參數(也就是被賦予的新值),會傳入賦值時的 this 對象。預設為 undefined

下麵通過代碼展示:

定義一個響應式函數defineReactive

function update() {
    app.innerText = obj.foo
}

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get ${key}:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                val = newVal
                update()
            }
        }
    })
}

調用defineReactive,數據發生變化觸發update方法,實現數據響應式

const obj = {}
defineReactive(obj, 'foo', '')
setTimeout(()=>{
    obj.foo = new Date().toLocaleTimeString()
},1000)

在對象存在多個key情況下,需要進行遍歷

function observe(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return
    }
    Object.keys(obj).forEach(key => {
        defineReactive(obj, key, obj[key])
    })
}

如果存在嵌套對象的情況,還需要在defineReactive中進行遞歸

function defineReactive(obj, key, val) {
    observe(val)
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get ${key}:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                val = newVal
                update()
            }
        }
    })
}

當給key賦值為對象的時候,還需要在set屬性中進行遞歸

set(newVal) {
    if (newVal !== val) {
        observe(newVal) // 新值是對象的情況
        notifyUpdate()
    }
}

上述例子能夠實現對一個對象的基本響應式,但仍然存在諸多問題

現在對一個對象進行刪除與添加屬性操作,無法劫持到

const obj = {
    foo: "foo",
    bar: "bar"
}
observe(obj)
delete obj.foo // no ok
obj.jar = 'xxx' // no ok

當我們對一個數組進行監聽的時候,並不那麼好使了

const arrData = [1,2,3,4,5];
arrData.forEach((val,index)=>{
    defineProperty(arrData,index,val)
})
arrData.push() // no ok
arrData.pop()  // no ok
arrDate[0] = 99 // ok

可以看到數據的api無法劫持到,從而無法實現數據響應式,

所以在Vue2中,增加了setdelete API,並且對數組api方法進行一個重寫

還有一個問題則是,如果存在深層的嵌套對象關係,需要深層的進行監聽,造成了性能的極大問題

小結

  • 檢測不到對象屬性的添加和刪除
  • 數組API方法無法監聽到
  • 需要對每個屬性進行遍歷監聽,如果嵌套對象,需要深層監聽,造成性能問題

二、proxy

Proxy的監聽是針對一個對象的,那麼對這個對象的所有操作會進入監聽操作,這就完全可以代理所有屬性了

ES6系列中,我們詳細講解過Proxy的使用,就不再述說了

下麵通過代碼進行展示:

定義一個響應式方法reactive

function reactive(obj) {
    if (typeof obj !== 'object' && obj != null) {
        return obj
    }
    // Proxy相當於在對象外層加攔截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`獲取${key}:${res}`)
            return res
        },
        set(target, key, value, receiver) {
            const res = Reflect.set(target, key, value, receiver)
            console.log(`設置${key}:${value}`)
            return res
        },
        deleteProperty(target, key) {
            const res = Reflect.deleteProperty(target, key)
            console.log(`刪除${key}:${res}`)
            return res
        }
    })
    return observed
}

測試一下簡單數據的操作,發現都能劫持

const state = reactive({
    foo: 'foo'
})
// 1.獲取
state.foo // ok
// 2.設置已存在屬性
state.foo = 'fooooooo' // ok
// 3.設置不存在屬性
state.dong = 'dong' // ok
// 4.刪除屬性
delete state.dong // ok

再測試嵌套對象情況,這時候發現就不那麼 OK 了

const state = reactive({
    bar: { a: 1 }
})

// 設置嵌套對象屬性
state.bar.a = 10 // no ok

如果要解決,需要在get之上再進行一層代理

function reactive(obj) {
    if (typeof obj !== 'object' && obj != null) {
        return obj
    }
    // Proxy相當於在對象外層加攔截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`獲取${key}:${res}`)
            return isObject(res) ? reactive(res) : res
        },
    return observed
}

三、總結

Object.defineProperty只能遍歷對象屬性進行劫持

function observe(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return
    }
    Object.keys(obj).forEach(key => {
        defineReactive(obj, key, obj[key])
    })
}

Proxy直接可以劫持整個對象,並返回一個新對象,我們可以只操作新的對象達到響應式目的

function reactive(obj) {
    if (typeof obj !== 'object' && obj != null) {
        return obj
    }
    // Proxy相當於在對象外層加攔截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`獲取${key}:${res}`)
            return res
        },
        set(target, key, value, receiver) {
            const res = Reflect.set(target, key, value, receiver)
            console.log(`設置${key}:${value}`)
            return res
        },
        deleteProperty(target, key) {
            const res = Reflect.deleteProperty(target, key)
            console.log(`刪除${key}:${res}`)
            return res
        }
    })
    return observed
}

Proxy可以直接監聽數組的變化(pushshiftsplice

const obj = [1,2,3]
const proxtObj = reactive(obj)
obj.psuh(4) // ok

Proxy有多達13種攔截方法,不限於applyownKeysdeletePropertyhas等等,這是Object.defineProperty不具備的

正因為defineProperty自身的缺陷,導致Vue2在實現響應式過程需要實現其他的方法輔助(如重寫數組方法、增加額外setdelete方法)

// 數組重寫
const originalProto = Array.prototype
const arrayProto = Object.create(originalProto)
['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
  arrayProto[method] = function () {
    originalProto[method].apply(this.arguments)
    dep.notice()
  }
});

// set、delete
Vue.set(obj,'bar','newbar')
Vue.delete(obj),'bar')

Proxy 不相容IE,也沒有 polyfilldefineProperty 能支持到IE9

參考文獻

  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 隨著大數據技術的演進和信息安全性需求的提升,數據規模的持續擴張為數據運維工作帶來了嚴峻考驗。面對海量數據所形成的繁重管理壓力,運維人員面臨效率瓶頸,而不斷攀升的人力成本也使得單純依賴擴充運維團隊來解決問題變得不再實際可行。 由此可見,智能化與高效便捷是運維發展的必然方向。袋鼠雲所推出的巡檢報告功能, ...
  • 前言: insert into t2 select * from t1; 這條語句會對查詢表 t1 加鎖嗎?不要輕易下結論。對GreatSQL的鎖進行研究之前,首先要確認一下事務的隔離級別,不同的事務隔離級別,鎖的表現是不一樣的。 實驗: 創建測試表t1,t2 greatsql> create ta ...
  • 金融業務產品授信準入、交易營銷等環節存在廣泛的風控訴求,隨著業務種類增多,傳統的專家規則、評分卡模型難以應付日趨複雜的風控場景。 在傳統風控以專家規則系統為主流應用的語境下,規則模型的入參習慣被稱為“變數”。基於專家規則的風險評估,存在規則觸發閾值難量化的特點,規則命中精準度提升存在瓶頸。 隨著機器 ...
  • 本文分享自華為雲社區《GaussDB資料庫SQL系列-動態語句》,作者:Gauss松鼠會小助手2。 一、前言 在資料庫中構建動態SQL語句是指根據不同的條件或參數創建不同的SQL語句。這通常是為了適應不同的業務需求,提高SQL的靈活性和效率。GaussDB資料庫是一款具備高性能、高可用性和高擴展性的 ...
  • 本文分享自華為雲社區《GaussDB跨雲容災:實現跨地域的資料庫高可用能力》,作者:GaussDB 資料庫。 金融、銀行業等對數據的安全有著較高的要求,同城容災建設方案,在絕大多數場景下可以保證業務數據的安全性,但是在極端情況下,如遇不可抗力因素等,要保證數據的安全性,就需要採取跨地域的容災方案。 ...
  • Ubuntu22.04安裝 本操作在虛擬機上 安裝Redis 1)更新系統 sudo apt update sudo apt upgrade 2)安裝Redis sudo apt install redis-server 3)測試Redis是否工作 redis-cli --version syste ...
  • Linux入門(五) 本篇文章主要講述下文件處理相關的命令 1: 顯示許可權 ls -lh 總用量 36K drwxrwxr-x 5 zh zh 4.0K 2月 28 16:47 app -rw-rw-r-- 1 zh zh 530 2月 22 18:25 build.gradle drwxrwxr- ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 開始之前 Composition API 可以說是Vue3的最大特點,那麼為什麼要推出Composition Api,解決了什麼問題? 通常使用Vue2開發的項目,普遍會存在以下問題: 代碼的可讀性隨著組件變大而變差 每一種代碼復用的方式 ...
一周排行
    -Advertisement-
    Play Games
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...