為什麼Proxy被vue選中

2021-10-24 23:32:40 字數 2908 閱讀 5143

1.先看下定義:

proxy 可以理解成,在目標物件之前架設一層「攔截」,外界對該物件的訪問,都必須先通過這層攔截,因此提供了一種機制,可以對外界的訪問進行過濾和改寫。proxy 這個詞的原意是**,用在這裡表示由它來「**」某些操作,可以譯為「**器」。

語法:

let  pro=

newproxy

(target, handler)

;

例項:

let obj=

;let proxy =

newproxy

(obj,})

;proxy.time // 7269

proxy.name // 7269

proxy.title // 7269

proxy的第乙個引數obj就是目標物件,get方法的兩個引數分別是目標物件和所要訪問的屬性。可以看到,由於攔截函式總是返回35,所以訪問任何屬性都得到7269。

注意,要使得proxy起作用,必須針對proxy例項(上例是proxy物件)進行操作,而不是針對目標物件(上例是空物件)進行操作。

如果handler沒有設定任何攔截,那就等同於直接通向原物件。

var target =

;var handler =

;var proxy =

newproxy

(target, handler)

;proxy.a =

'b';

target.a // "b

上面**中,handler是乙個空物件,沒有任何攔截效果,訪問proxy就等同於訪問target。

同乙個***函式,可以設定攔截多個操作

var handler =

return

'hello, '

+ name;},

function

(target, thisbinding, args)

, construct:

function

(target, args);}

};var fproxy =

newproxy

(function

(x, y)

, handler)

;fproxy(1

,2)// 1

newfproxy(1

,2)//

fproxy.prototype === object.prototype // true

fproxy.foo ===

"hello, foo"

// true

const target =

;const handler =

return reflect.

get(

...arguments);}

};const proxy =

newproxy

(target, handler)

;console.

log(proxy.notproxied)

;// "original value"

console.

log(proxy.proxied)

;// "replaced value"

2.對比

proxy 的優勢如下:

proxy 可以直接監聽物件而非屬性;

proxy 可以直接監聽陣列的變化;

proxy 返回的是乙個新物件,我們可以只操作新的物件達到目的,而 object.defineproperty

只能遍歷物件屬性直接修改;

proxy 作為新標準將受到瀏覽器廠商重點持續的效能優化,也就是傳說中的新標準的效能紅利;

object.defineproperty 的優勢如下:

相容性好,支援 ie9,而 proxy 的存在瀏覽器相容性問題,而且無法用 polyfill 磨平

handler 物件的方法 一共 13 種。大多都和object的方法功能很相似。就是和reflect的靜態方法是一樣的,想要了解具體用法的:

handler.

getprototypeof()

; 方法的捕捉器。

handler.

setprototypeof()

; 方法的捕捉器。

handler.

i***tensible()

; 方法的捕捉器。

handler.

preventextensions()

; 方法的捕捉器。

handler.

getownpropertydescriptor()

; 方法的捕捉器。

handler.

defineproperty()

; 方法的捕捉器。

handler.

has();

//in 操作符的捕捉器。

handler.

get();

//屬性讀取操作的捕捉器。

handler.

set();

//屬性設定操作的捕捉器。

handler.

deleteproperty()

;//delete 操作符的捕捉器。

handler.

ownkeys()

; 方法和 object.getownpropertysymbols 方法的捕捉器。

handler.()

;//函式呼叫操作的捕捉器。

handler.

construct()

;//new 操作符的捕捉器。

proxy的理解及proxy為什麼可以監聽陣列?

1,proxy的基本理解 proxy是es6中的語法,最為 的功能,當外接要訪問物件的時候,proxy可以做一層攔截,並且可以對這個proxy 進行操作,進而實現對物件的操作。如 var proxy newproxy obj,handler 這裡定義的proxy作為obj的 handler也是個物件...

Vue3 0為什麼使用Proxy實現雙向繫結

object.defineproperty只能劫持物件的屬性,而proxy是直接 物件 由於object.defineproperty只能對屬性進行劫持,需要遍歷物件的每個屬性。而proxy可以直接 物件。object.defineproperty對新增屬性需要手動進行observe,由於objec...

76個星座為什麼被詛咒 蛇夫座為什麼被詛咒的原因

蛇夫座為什麼被詛咒 雖然蛇夫座很早就被發現,但西方的占星術界卻從來沒把蛇夫座談論在星座學之中。如今又被大家當做第十三個星座被提及,其實在黃道裡面,穿過的星座不止十二個,也不止十三個,但每一次超過十二個,也不會被廣泛承認。也許是因為他們覺得十三這個數字很不吉利吧。蛇夫座傳說 加上關於蛇夫座的傳說也有些...