【源码系列#01】vue3响应式原理（Proxy）
专栏分享：vue2源码专栏，vue3源码专栏，vue router源码专栏，玩具项目专栏，硬核💪推荐🙌
欢迎各位ITer关注点赞收藏🌸🌸🌸
在学习 Vue3 是如何进行对象的响应式代理之前，我想我们应该先去了解下 ES6 新增的API Proxy 与 Reflect，可参考【Vue3响应式入门#02】Proxy and Reflect 。之后我们再手写下 reactive 和 effect 的源码
Reactive
定义: 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()
const obj = reactive({ count: 0 })
响应式转换是“深层的”：会影响对象内部所有嵌套的属性。基于 ES6 的 Proxy 实现，返回的代理对象不等于原始对象。建议仅使用代理对象而避免依赖原始对象。
reactive.ts
Vue3中响应数据核心是 reactive ， reactive 中的实现是由 proxy 加 effect 组合，先来看一下 reactive 方法的定义
import { isObject } from '@vue/shared'
import { mutableHandlers, ReactiveFlags } from './baseHandler'
// key只能是对象；弱引用，更有效的垃圾回收、释放内存 - https://www.zhangxinxu.com/wordpress/2021/08/js-weakmap-es6/
const reactiveMap = new WeakMap()
/**
* @desc 将数据转化成响应式的数据
*/
export function reactive(target) {
// issue1
if (!isObject(target)) {
return
}
// issue2
if (target[ReactiveFlags.IS_REACTIVE]) {
return target
}
// issue3
let existingProxy = reactiveMap.get(target)
if (existingProxy) {
return existingProxy
}
const proxy = new Proxy(target, mutableHandlers)
reactiveMap.set(target, proxy)
return proxy
}
-
@issue1 只能做对象的代理，不是对象，return
-
@issue2 代理对象被再次代理 可以直接返回代理对象
我们可以利用 Proxy 的 get方法，来判断他有没有代理过
如果访问这个对象的
__v_isReactive属性，有值就说明代理过了，当然，我们可以约定__v_isReactive为任何字段 -
@issue3 同一个对象代理多次，返回同一个代理
用 WeakMap去缓存对象和代理对象的映射关系
代理完成时，将此对象和代理对象添加到 WeakMap缓存中；在代理之前，去 WeakMap中读取此对象是否有代理对象的映射，若存在，则返回缓存中的代理对象
WeakMap：key只能是对象；弱引用，更有效的垃圾回收、释放内存，详情请参考JS WeakMap应该什么时候使用 « 张鑫旭-鑫空间-鑫生活
baseHandler.ts
mutableHandlers 是 Proxy 的第二个参数 handler对象提取封装而来
- track () 依赖收集
- trigger () 触发依赖
这两个函数为 effect 里的方法，effect 为 reactive 的核心，后面我们会详细介绍。先来看一下mutableHandlers 对象的定义
import { track, trigger } from './effect'
export const enum ReactiveFlags {
IS_REACTIVE = '__v_isReactive',
}
export const mutableHandlers = {
// 这里可以监控到用户取值了
get(target, key, receiver) {
if (key === ReactiveFlags.IS_REACTIVE) {
return true
}
track(target, 'get', key)
let res = Reflect.get(target, key, receiver)
// @issue1
// 深度代理实现, 性能好 取值就可以进行代理
if (isObject(res)) {
return reactive(res)
}
return res
},
// 这里可以监控到用户设置值了
set(target, key, value, receiver) {
let oldValue = target[key] // 缓存老值
let result = Reflect.set(target, key, value, receiver)
if (oldValue !== value) {
// 值变化了，触发依赖
trigger(target, 'set', key)
}
return result
},
}
-
@issue1 嵌套对象深度代理。只有在取值时，才会进行深度代理，性能好
举个例子，看如下代码。当我们对嵌套对象
product.rate进行取值时，就会触发 get劫持，然后深度代理嵌套对象product.rate
const product = reactive({
price: 5,
quantity: 2,
rate: {
value: 0.9
}
})
shared.ts
共享模块
// 判断是否是JS对象
export const isObject = function(value){
return typeof value === 'object' && value !== null
}
参考资料
JS WeakMap应该什么时候使用 « 张鑫旭-鑫空间-鑫生活