1、预备知识
Vue3 里使用了 Proxy 和 Reflect 实现响应式数据，先熟悉下这两个API 。首先说明一点：Proxy对象上有的方法，Reflect上也有
1.1、Reflect
- Reflect 的出现是为了
1、将Object对象的一些明显属于语言内部的方法移到Reflect 上，如Object.defineProperty；
2、修改 Object 上某些方法的返回值使其更加合理，比如 Object.setPrototypeOf(a,{})总是返回a，而明显返回是否操作成功更加合理；
3、让Object的操作变得更加函数式，如Reflect.has(obj,a)比 a in obj 更可读；
4、与 Proxy对象的方法一一对应，这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为并作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。
- Reflect 常用静态方法
1、Reflect.get(target, name, receiver)
查找并返回target对象的name属性，如果没有该属性，则返回undefined。如果name是一个get 属性，则get函数的this会被绑定为receiver对象
2、Reflect.set(target, name, value, receiver)
设置target对象的name属性等于value。如果name属性设置了赋值函数，则赋值函数的this绑定receiver。如果 Proxy对象和 Reflect对象联合使用，前者拦截赋值操作，后者完成赋值的默认行为，而且传入了receiver，那么Reflect.set会触发Proxy.defineProperty拦截。
1.2、Proxy
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。常见用法：
var obj = new Proxy({}, {
get: function (target, propKey, receiver) {
console.log(`getting ${propKey}!`);
return Reflect.get(target, propKey, receiver);
},
set: function (target, propKey, value, receiver) {
console.log(`setting ${propKey}!`);
return Reflect.set(target, propKey, value, receiver);
}
});
2、实现 reactive & effect & computed
-
原理图
工具及闭包类
function isObj(obj) {
return obj !== null && typeof obj === 'object'
}
const rawToReactive = new WeakMap()
const reactiveToRaw = new WeakMap()
const targetMap = new WeakMap()
const effectStack = []
- reactive
// proxy 的 handler
const handlers = {
get(target, name, receiver) {
const result = Reflect.get(target, name, receiver)
track(target, name);
return isObj(result) ? reactive(result) : result
},
set(target, name, value, receiver) {
const result = Reflect.set(target, name, value, receiver)
trigger(target, name, value);
return result
}
}
// 收集依赖，构造 targetMap
function track(target, name) {
let target2 = targetMap.get(target)
if (!target2) {
target2 = new Map()
targetMap.set(target, target2)
}
let effectSet = target2.get(name)
if (!effectSet) {
effectSet = new Set()
target2.set(name, effectSet)
}
const fn = effectStack[effectStack.length - 1]
fn && effectSet.add(fn)
}
// 触发 effect
function trigger(target, name, value) {
const effectsMap = targetMap.get(target)
const effects = effectsMap.get(name)
effects.forEach(fn => fn(value))
}
// 响应式核心函数
function reactive(target) {
const proxyObj = rawToReactive.get(target)
if (proxyObj) {
return proxyObj
}
if (reactiveToRaw.get(target)) {
return target
}
const proxy = new Proxy(target, handlers)
rawToReactive.set(target, proxy)
reactiveToRaw.set(proxy, target)
return proxy
}
- effect
function effect(fn) {
effectStack.push(fn)
const result = fn() // 执行 fn 时会触发 get 拦截
effectStack.pop()
return result
}
- computed
function computed(fn) {
return {
get value() {
return effect(fn)
}
}
}
3、Demo
本文代码可在这里找到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue3响应式原理</title>
<script src="./utils.js"></script>
<script src="./reactive.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const button = document.querySelector('#app')
const obj = {
name: '风之化身',
age: 28,
meta: {
title: '高级工程师'
}
}
const proxy = reactive(obj)
const computedObj = computed(() => proxy.age * 2)
effect(() => {
button.innerHTML = `${proxy.name} ${proxy.age} ${proxy.meta.title} ${computedObj.value}`
})
button.onclick = function () {
proxy.age += 1
}
</script>
</body>
</html>
