vue3實現響應式原理 Proxy

vue3:

回顧object.definepropery的缺點

1. 基本使用

const data =

const data =
['a'
,'b'
,'c'
]const proxydata =
newproxy
(data,
const result = reflect.
get(target, key, receiver)
return result // 返回結果},
set(target, key, val, receiver)
const result = reflect.
set(target, key, val, receiver)
console.
log(
'set'
, key, val)
// console.log('result', result) // true
return result // 是否設定成功},
deleteproperty
(target, key),}
)

const obj =

//等價
'a'in obj 
reflect.
has(obj,
'a')
//等價
delete obj.a
reflect.
deleteproperty
(obj,
'a')
//等價
object.
getownpropertynames
(obj)
//['a','b']
reflect.
ownkeys
(obj)

vue3 怎麼用proxy實現響應式的

// 建立響應式

function
reactive
(target =
)// **配置
const proxyconf =
const result = reflect.
get(target, key, receiver)
// 深度監聽
// 效能如何提公升的？不是一次性遞迴的
return
reactive
(result)},
set(target, key, val, receiver)
const ownkeys = reflect.
ownkeys
(target)
if(ownkeys.
includes
(key)
)else
const result = reflect.
set(target, key, val, receiver)
console.
log(
'set'
, key, val)
// console.log('result', result) // true
return result // 是否設定成功},
deleteproperty
(target, key),}
// 生成**物件
const observed =
newproxy
(target, proxyconf)
return observed
}// 測試資料
const data =,}
,},}
,},}
//對陣列的更改(如下標)也可以監聽到
const data =
['1'
,'2'
,'3'
,'4'
]const proxydata =
reactive
(data)
console.
log(proxydata)
//['1', '2', '3', '4']
proxydata[2]
='test'
console.
log(proxydata)
//['1', '2', 'test', '4']

vue3 中文文件

Vue3 和 Vue2 的響應式原理區別

vue2響應式是通過object.defineproperty 劫持各個屬性 getter 和 setter，在資料變化時發布訊息給訂閱者，觸發相應的監聽 存在幾個問題 初始化時需要遍歷物件所有 key，如果物件層次較深，效能不好 通知更新過程需要維護大量 dep 例項和 watcher 例項，額外...

Vue3響應式原理與Vue2的對比

源資料 let person region 模擬vue2中實現響應式 let p object.defineproperties p,name 有人修改name時呼叫 set value object.defineproperties p,age 有人修改name時呼叫 set value endr...

Vue3響應式API ref和reactive

在vue3中,有兩個重要的api分別是ref 和reactive 使用方法如下 import from vue setup let count ref 0 return 基本資料型別使用ref物件建立響應式,複雜資料型別使用reactive建立響應式,在js檔案中操作ref物件建立的值需要使用 va...