第三十六篇:vue3響應式(關於Proxy代理對象,Reflect反射對象)

好家伙,這個有點難.

 

1.代理對象Proxy

Proxy 對象用於創建一個對象的代理，從而實現基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數調用等）。

攔截對象中任意屬性的變化,包括:查get,增和改set,刪除delete

1.1.語法:

const p = new Proxy(target, handler)

1.1.1參數:

target

要使用 Proxy 包裝的目標對象（可以是任何類型的對象，包括原生數組，函數，甚至另一個代理）。

handler

一個通常以函數作為屬性的對象，各屬性中的函數分別定義了在執行各種操作時代理 p 的行為。(這個可以塞get和set)

 

上代碼:vue3響應式的模板

const p = new Proxy(person,{
                //有人讀取p的某個屬性時調用
                get(target,propName){
                    console.log(`有人讀取了p身上的${propName}屬性`)
                    return Reflect.get(target,propName)
                },
                //有人修改p的某個屬性、或給p追加某個屬性時調用
                set(target,propName,value){
                    console.log(`有人修改了p身上的${propName}屬性，我要去更新界面了！`)
                    Reflect.set(target,propName,value)
                },
                //有人刪除p的某個屬性時調用
                deleteProperty(target,propName){
                    console.log(`有人刪除了p身上的${propName}屬性，我要去更新界面了！`)
                    return Reflect.deleteProperty(target,propName)
                },

1.2.   deleteProperty

1.2.1. 

handler.deleteProperty() 方法可以攔截 delete 操作。(可以在網頁控制台)

1.2.2.其參數

deleteProperty 方法將會接受以下參數。

target

目標對象。

property

待刪除的屬性名。

1.2.3.返回值

deleteProperty 必須返回一個 Boolean 類型的值，表示了該屬性是否被成功刪除。

 

2.  反射對象Reflect:對被代理對象的屬性進行操作,

　　　　　　對被代理對象的屬性進行操作!

　　　　　　對被代理對象的屬性進行操作!

2.1. Reflect 是一個內置的對象，它提供攔截 JavaScript 操作的方法。

它把事做完后,會返回一個布克值,所以可以直接在前面接return