这篇文章主要为大家介绍了Vue3的响应式原理解析,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
Vue3使用的是ES6的Proxy特性
function reactive(obj) {
if (typeof obj !== 'object' && obj != null) {
return obj
}
// Proxy相当于在对象外层加拦截
// http://es6.ruanyifeng.com/#docs/proxy
const observed = new Proxy(obj, {
get(target, key, receiver) {
// Reflect用于执行对象默认操作,更规范、更友好
// Proxy和Object的方法Reflect都有对应
// http://es6.ruanyifeng.com/#docs/reflect
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',
bar: {
a: 1
}
})
// 1.获取
state.foo // ok
// 2.设置已存在属性
state.foo = 'fooooooo' // ok
// 3.设置不存在属性
state.dong = 'dong' // ok
// 4.删除属性
delete state.dong // ok
嵌套对象响应式
测试:嵌套对象不能响应
// 设置嵌套对象属性
react.bar.a = 10 // no ok
添加对象类型递归
// 提取帮助方法
const isObject = val => val !== null && typeof val === 'object'
function reactive(obj) {
//判断是否对象
if (!isObject(obj)) {
return obj
}
const observed = new Proxy(obj, {
get(target, key, receiver) {
// ...
// 如果是对象需要递归
return isObject(res) ? reactive(res) : res
},
//...
})
}
避免重复代理
重复代理,比如
reactive (data) // 已代理过的纯对象
reactive (react) // 代理对象
解决方式:将之前代理结果缓存,get 时直接使用
const toProxy = new WeakMap() // 形如obj:observed
const toRaw = new WeakMap() // 形如observed:obj
function reactive (obj) {
//...
// 查找缓存,避免重复代理
if (toProxy.has(obj)) {
return toProxy.get(obj)
}
if (toRaw.has(obj)) {
return obj
}
const observed = new Proxy(...)
// 缓存代理结果
toProxy.set(obj, observed)
toRaw.set(observed, obj)
return observed
}
// 测试效果
console.log(reactive(data) === state)
console.log(reactive(state) === state)