手写简单 vue3 响应式原理
作者：小浪努力学前端
https://juejin.cn/post/7134281691295645732
在这篇文章中我们来带大家来简单手写一下Vue3中的几个响应式api
Proxy
首先得先来介绍一下Proxy这个强大的API：
在Vue3中使用Proxy对象来代替 Vue 2 中基于 Object.defineProperty，消除了 Vue 2 中基于 Object.defineProperty 所存在的一些局限，比如无法监听数组索引，length属性等等
在Proxy中默认监听动态添加属性和属性的删除操作，就很方便
Proxy配合Reflect使用，Reflect是ES6出现的新特性，代码运行期间用来设置或获取对象成员（操作对象成员），Reflect没有出现前使用Ojbect的一些方法比如 Ojbect.getPrototypeOf, Reflect也有对应的方法 Reflect.getPrototypeOf,两者都是一样的，不过Reflect更有语义。
下面来看一下基本的使用
const target = {
name: '小浪',
age: 22,
}
const handler = {
get(target, key, receiver) {
console.log(`获取对象属性${key}值`)
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
console.log(`设置对象属性${key}值`)
return Reflect.set(target, key, value, receiver)
},
deleteProperty(target, key) {
console.log(`删除对象属性${key}值`)
return Reflect.deleteProperty(target, key)
},
}
const proxy = new Proxy(target, handler)
console.log(proxy.age)
proxy.age = 21
console.log(delete proxy.age)
输出
获取对象属性age值
22
设置对象属性age值
删除对象属性age值
true
target：参数表示所要拦截的目标对象
handler：参数也是一个对象，用来定制拦截行为
注意：
this 关键字表示的是代理的 handler 对象，所以不能使用this而是要用 receiver传递，
receiver代表当前proxy对象 或者 继承proxy的对象，它保证传递正确的 this 给 getter，setterset和deleteProperty也需要返回（添加return），返回的是一个布尔值，设置/删除成功返回true，反之返回false
reactive
了解了上面的Proxy和Reflect，我们来看一下reactive的实现，reactive，返回proxy对象，这个reactive可以深层次递归，如果发现子元素存在引用类型，递归处理。
// 判断是否为对象 ，注意 null 也是对象
const isObject = val => val !== null && typeof val === 'object'
// 判断key是否存在
const hasOwn = (target, key) => Object.prototype.hasOwnProperty.call(target, key)
export function reactive(target) {
// 首先先判断是否为对象
if (!isObject(target)) return target
const handler = {
get(target, key, receiver) {
console.log(`获取对象属性${key}值`)
// ... 这里还需要收集依赖，先空着
const result = Reflect.get(target, key, receiver)
// 递归判断的关键, 如果发现子元素存在引用类型，递归处理。
if (isObject(result)) {
return reactive(result)
}
return result
},
set(target, key, value, receiver) {
console.log(`设置对象属性${key}值`)
// 首先先获取旧值
const oldValue = Reflect.get(target, key, reactive)
// set 是需要返回 布尔值的
let result = true
// 判断新值和旧值是否一样来决定是否更新setter
if (oldValue !== value) {
result = Reflect.set(target, key, value, receiver)
// 更新操作 等下再补
}
return result
},
deleteProperty(target, key) {
console.log(`删除对象属性${key}值`)
// 先判断是否有key
const hadKey = hasOwn(target, key)
const result = Reflect.deleteProperty(target, key)
if (hadKey && result) {
// 更新操作 等下再补
}
return result
},
}
return new Proxy(target, handler)
}
测试
<!DOCTYPE html>
<html lang="zh-CN">
<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></title>
</head>
<body>
<script type="module">
import { reactive } from '../src/reactive.js'
const obj = {
name: '小浪',
age: 22,
test: {
test1: {
test2: 21,
},
},
}
const proxy = reactive(obj)
console.log(proxy.age)
proxy.test.test1.test2 = 22
console.log(delete proxy.age)
</script>
</body>
</html>
收集依赖/触发更新
上面我们还有get中收集依赖没有完成，收集依赖涉及道track , effect 还有依赖地图，下面我给出一张图先介绍一下effect和track是如何收集依赖的
响应式顺序：effect > track > trigger > effect
在组件渲染过程中，一个 effect 会会触发get，从而对值进行 track，当值发生改变，就会进行 trigge，执行 effect 来完成一个响应
那么先来实现 effect
effect
effect的实现很简单
// activeEffect 表示当前正在走的 effect
let activeEffect = null
export function effect(callback) {
activeEffect = callback
callback()
activeEffect = null
}
track
然后就是对 track 的实现
// targetMap 表里每个key都是一个普通对象 对应他们的 depsMap
let targetMap = new WeakMap()
export function track(target, key) {
// 如果当前没有effect就不执行追踪
if (!activeEffect) return
// 获取当前对象的依赖图
let depsMap = targetMap.get(target)
// 不存在就新建
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()))
}
// 根据key 从 依赖图 里获取到到 effect 集合
let dep = depsMap.get(key)
// 不存在就新建
if (!dep) {
depsMap.set(key, (dep = new Set()))
}
// 如果当前effectc 不存在，才注册到 dep里
if (!dep.has(activeEffect)) {
dep.add(activeEffect)
}
}
最后添加到hander 里 get 中
get(target, key, receiver) {
// ...
// 收集依赖
track(target, key)
// ...
},
触发更新
通过上面的图，我们知道在set中使用trigger函数来触发更新，我们来实现一下吧
// trigger 响应式触发
export function trigger(target, key) {
// 拿到 依赖图
const depsMap = targetMap.get(target)
if (!depsMap) {
// 没有被追踪，直接 return
return
}
// 拿到了 视图渲染effect 就可以进行排队更新 effect 了
const dep = depsMap.get(key)
// 遍历 dep 集合执行里面 effect 副作用方法
if (dep) {
dep.forEach(effect => {
effect()
})
}
}
最后添加到hander 的 set 和 deleteProperty 中
set(target, key, value, receiver) {
// ...
if (oldValue !== value) {
result = Reflect.set(target, key, value, receiver)
trigger(target, key)
}
// ...
},
deleteProperty(target, key) {
// ...
if (hadKey && result) {
// 更新操作
trigger(target, key)
}
// ...
}
ref
把一个基础类型包装成一个有value响应式对象（这里是使用get/set 存取器，来进行追踪和触发），如果是普通对象就调用 reactive 来创建响应式对象
// 判断是否是一个对象，是就用 reactive 来代理
const convert = val => (isObject(val) ? reactive(val) : val)
class RefImpl {
constructor(_rawValue) {
this._rawValue = _rawValue
this.__v_isRef = true
// 判断 _rawValue 是否是一个对象
// 如果是对象调用reactive使用 proxy来代理
// 不是返回 _rawValue 本身
this._value = convert(_rawValue)
}
// 使用get/set 存取器，来进行追踪和触发
get value() {
// 追踪依赖
track(this, 'value')
// 当然 get 得返回 this._value
return this._value
}
set value(newValue) {
// 判断旧值和新值是否一直
if (newValue !== this._value) {
this._rawValue = newValue
// 设置新值的时候也得使用 convert 处理一下，判断新值是否是对象
this._value = convert(this._rawValue)
// 触发依赖
trigger(this, 'value')
}
}
}
export function ref(rawValue) {
// __v_isRef 用来标识是否是 一个 ref 如果是直接返回，不用再转
if (isObject(rawValue) && rawValue.__v_isRef) return rawValue
return new RefImpl(rawValue)
}
toRef
toRef传入两个参数，目标对象，对象当中的属性名，它的返回结果就是属性名的可响应式数据，就是将对象中的某个值转化为响应式数据 toRef(obj,key)那么简单来实现一下
class ObjectRefImpl {
constructor(proxy, _key) {
this._proxy = proxy
this._key = _key
// __v_isRef 用来标识是否是 一个 ref
this.__v_isRef = true
}
get value() {
// 这里不用收集依赖
// this._proxy 就是响应式对象，当访问[this._key]时，this._proxy里面会去自动收集依赖
return this._proxy[this._key]
}
set value(newVal) {
// 这里不用收集依赖
// this._proxy 响应式对象，会在this._proxy里面set去调用trigger
this._proxy[this._key] = newVal
}
}
// 暴露出去的方法
export function toRef(proxy, key) {
return new ObjectRefImpl(proxy, key)
}
测试
import { ref, effect, toRef, reactive } from '../src/reactive.js'
const obj = reactive({
name: '小浪',
})
const age = toRef(obj, 'age')
age.value = 21
console.log(obj)
effect(() => {
age.value = 22
})
console.log(obj)
原来的obj对象没有 age 属性，使用 toRef 添加了 age， 并且是响应式的
区别于ref:
ref是对原始数据的拷贝，当修改ref数据时，模板中的视图会发生改变，但是原始数据并不会改变。 toRef是对原始数据的引用，修改toRef数据时，原始数据也会发生改变，但是视图并不会更新。
toRefs
想必这个大家经常使用吧，平时如果使用reactive创建对象，我们不能直接进行解构，我们要使用 toRefs 帮助我们进行解构， 把整个 reactive 创建的对象变成 普通对象， 然后把每个属性变成 ref 响应式对象。那么直接上手写一下吧， 其实它的核心还是使用了 toRef
export function toRefs(proxy) {
// 判断 当前 proxy 是 proxy 数组， 还是 proxy 对象
const ret = proxy instanceof Array ? new Array(proxy.length) : {}
for (const key in proxy) {
// 内部还是调用 toRef 进行转为 响应式
ret[key] = toRef(proxy, key)
}
return ret
}
测试
import { reactive, toRefs } from '../src/reactive.js'
const obj = reactive({
name: '小浪',
age: 22,
})
const { name, age } = toRefs(obj)
console.log(obj)
name.value = '小云'
age.value = 21
console.log(obj)
测试成功，toRefs解构后的属性也是响应式
代码
github：https://github.com/LianTianNo1/vue3_reactive_demo
觉得本文对你有帮助？请分享给更多人
点赞和在看就是最大的支持❤️