Vue3 的响应式和之前有什么区别，Proxy 无敌？

前言

你们都知道，Vue2 里的响应式其实有点像是一个半彻底体，对于对象上新增的属性无能为力，对于数组则须要拦截它的原型方法来实现响应式。

举个例子：

let vm = new Vue({
  data() {
    return {
        a: 1
    }
  }
})

// ❌  oops，没反应！
vm.b = 2

let vm = new Vue({
  data() {
    return {
        a: 1
    }
  },
  watch: {
    b() {
      console.log('change !!')
    }
  }
})

// ❌  oops，没反应！
vm.b = 2

这种时候，Vue 提供了一个 api：this.$set，来使得新增的属性也拥有响应式的效果。

可是对于不少新手来讲，不少时候须要当心翼翼的去判断到底什么状况下须要用 $set，何时能够直接触发响应式。

总之，在 Vue3 中，这些都将成为过去。本篇文章会带你仔细讲解，proxy 到底会给 Vue3 带来怎么样的便利。而且会从源码级别，告诉你这些都是如何实现的。

响应式仓库

Vue3 不一样于 Vue2 也体如今源码结构上，Vue3 把耦合性比较低的包分散在 packages 目录下单独发布成 npm 包。 这也是目前很流行的一种大型项目管理方式 Monorepo。

其中负责响应式部分的仓库就是 @vue/rectivity，它不涉及 Vue 的其余的任何部分，是很是很是 「正交」 的一种实现方式。

甚至能够轻松的集成进 React。

这也使得本篇的分析能够更加聚焦的分析这一个仓库，排除其余无关部分。

区别

Proxy 和 Object.defineProperty 的使用方法看似很类似，其实 Proxy 是在 「更高维度」 上去拦截属性的修改的，怎么理解呢？

Vue2 中，对于给定的 data，如 { count: 1 }，是须要根据具体的 key 也就是 count，去对「修改 data.count 」 和 「读取 data.count」进行拦截，也就是

Object.defineProperty(data, 'count', {
  get() {},
  set() {},
})

必须预先知道要拦截的 key 是什么，这也就是为何 Vue2 里对于对象上的新增属性无能为力。

而 Vue3 所使用的 Proxy，则是这样拦截的：

new Proxy(data, {
  get(key) { },
  set(key, value) { },
})

能够看到，根本不须要关心具体的 key，它去拦截的是 「修改 data 上的任意 key」 和 「读取 data 上的任意 key」。

因此，不论是已有的 key 仍是新增的 key，都逃不过它的魔爪。

可是 Proxy 更增强大的地方还在于 Proxy 除了 get 和 set，还能够拦截更多的操做符。

简单的例子🌰

先写一个 Vue3 响应式的最小案例，本文的相关案例都只会用 reactive 和 effect 这两个 api。若是你了解过 React 中的 useEffect，相信你会对这个概念秒懂，Vue3 的 effect 不过就是去掉了手动声明依赖的「进化版」的 useEffect。

React 中手动声明 [data.count] 这个依赖的步骤被 Vue3 内部直接作掉了，在 effect 函数内部读取到 data.count 的时候，它就已经被收集做为依赖了。

Vue3：

// 响应式数据
const data = reactive({ 
  count: 1
})

// 观测变化
effect(() => console.log('count changed', data.count))

// 触发 console.log('count changed', data.count) 从新执行
data.count = 2

React：

// 数据
const [data, setData] = useState({
  count: 1
})

// 观测变化 须要手动声明依赖
useEffect(() => {
  console.log('count changed', data.count)
}, [data.count])

// 触发 console.log('count changed', data.count) 从新执行
setData({
  count: 2
})

其实看到这个案例，聪明的你也能够把 effect 中的回调函数联想到视图的从新渲染、 watch 的回调函数等等…… 它们是一样基于这套响应式机制的。

而本文的核心目的，就是探究这个基于 Proxy 的 reactive api，到底能强大到什么程度，能监听到用户对于什么程度的修改。

先讲讲原理

先最小化的讲解一下响应式的原理，其实就是在 Proxy 第二个参数 handler 也就是陷阱操做符中，拦截各类取值、赋值操做，依托 track 和 trigger 两个函数进行依赖收集和派发更新。

track 用来在读取时收集依赖。

trigger 用来在更新时触发依赖。

track

function track(target: object, type: TrackOpTypes, key: unknown) {
  const depsMap = targetMap.get(target);
  // 收集依赖时 经过 key 创建一个 set
  let dep = new Set()
  targetMap.set(ITERATE_KEY, dep)
  // 这个 effect 能够先理解为更新函数 存放在 dep 里
  dep.add(effect)    
}

target 是原对象。

type 是本次收集的类型，也就是收集依赖的时候用来标识是什么类型的操做，好比上文依赖中的类型就是 get，这个后续会详细讲解。

key 是指本次访问的是数据中的哪一个 key，好比上文例子中收集依赖的 key 就是 count

首先全局会存在一个 targetMap，它用来创建 数据 -> 依赖 的映射，它是一个 WeakMap 数据结构。

而 targetMap 经过数据 target，能够获取到 depsMap，它用来存放这个数据对应的全部响应式依赖。

depsMap 的每一项则是一个 Set 数据结构，而这个 Set 就存放着对应 key 的更新函数。

是否是有点绕？咱们用一个具体的例子来举例吧。

const target = { count: 1}
const data = reactive(target)

const effection = effect(() => {
  console.log(data.count)
})

对于这个例子的依赖关系，

1. 全局的 targetMap 是：

targetMap: {
  { count: 1 }: dep    
}

1. dep 则是

dep: {
  count: Set { effection }
}

这样一层层的下去，就能够经过 target 找到 count 对应的更新函数 effection 了。

trigger

这里是最小化的实现，仅仅为了便于理解原理，实际上要复杂不少，

其实 type 的做用很关键，先记住，后面会详细讲。

export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
) {
  // 简化来讲 就是经过 key 找到全部更新函数 依次执行
  const dep = targetMap.get(target)
  dep.get(key).forEach(effect => effect())
}

新增属性

这个上文已经讲了，因为 Proxy 彻底不关心具体的 key，因此没问题。

// 响应式数据
const data = reactive({ 
  count: 1
})

// 观测变化
effect(() => console.log('newCount changed', data.newCount))

// ✅ 触发响应
data.newCount = 2

数组新增索引：

// 响应式数据
const data = reactive([])

// 观测变化
effect(() => console.log('data[1] changed', data[1]))

// ✅ 触发响应
data[1] = 5

数组调用原生方法：

const data = reactive([])
effect(() => console.log('c', data[1]))

// 没反应
data.push(1)

// ✅ 触发响应 由于修改了下标为 1 的值
data.push(2)

其实这一个案例就比较有意思了，咱们仅仅是在调用 push，可是等到数组的第二项被 push的时候，咱们以前关注 data[1] 为依赖的回调函数也执行了，这是什么原理呢？写个简单的 Proxy 就知道了。

const raw = []
const arr = new Proxy(raw, {
  get(target, key) {
    console.log('get', key)
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    console.log('set', key)
    return Reflect.set(target, key, value)
  }
})

arr.push(1)

在这个案例中，咱们只是打印出了对于 raw 这个数组上的全部 get、set 操做，而且调用 Reflect 这个 api 原样处理取值和赋值操做后返回。看看 arr.push(1) 后控制台打印出了什么？

get push
get length
set 0
set length

原来一个小小的 push，会触发两对 get 和 set，咱们来想象一下流程：

1. 读取 push 方法
2. 读取 arr 原有的 length 属性
3. 对于数组第 0 项赋值
4. 对于 length 属性赋值

这里的重点是第三步，对于第 index 项的赋值，那么下次再 push，能够想象也就是对于第 1 项触发 set 操做。

而咱们在例子中读取 data[1]，是必定会把对于 1 这个下标的依赖收集起来的，这也就清楚的解释了为何 push 的时候也能精准的触发响应式依赖的执行。

对了，记住这个对于 length 的 set 操做，后面也会用到，很重要。

遍历后新增

// 响应式数据
const data = reactive([])

// 观测变化
effect(() => console.log('data map +1', data.map(item => item + 1))

// ✅ 触发响应 打印出 [2]
data.push(1)

这个拦截很神奇，可是也很合理，转化成现实里的一个例子来看，

假设咱们要根据学生 id 的集合 ids， 去请求学生详细信息，那么仅仅是须要这样写便可：

const state = reactive({})
const ids = reactive([1])

effect(async () => {
  state.students = await axios.get('students/batch', ids.map(id => ({ id })))
})

// ✅ 触发响应 
ids.push(2)

这样，每次调用各类 api 改变 ids 数组，都会从新发送请求获取最新的学生列表。

若是我在监听函数中调用了 map、forEach 等 api，

说明我关心这个数组的长度变化，那么 push 的时候触发响应是彻底正确的。

可是它是如何实现的呢？感受彷佛很复杂啊。

由于 effect 第一次执行的时候， data 仍是个空数组，怎么会 push 的时候能触发更新呢？

仍是用刚刚的小测试，看看 map 的时候会发生什么事情。

const raw = [1, 2]
const arr = new Proxy(raw, {
  get(target, key) {
    console.log('get', key)
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    console.log('set', key)
    return Reflect.set(target, key, value)
  }
})

arr.map(v => v + 1)

get map
get length
get constructor
get 0
get 1

和 push 的部分有什么相同的？找一下线索，咱们发现 map 的时候会触发 get length，而在触发更新的时候， Vue3 内部会对 「新增 key」 的操做进行特殊处理，这里是新增了 0 这个下标的值，会走到 trigger 中这样的一段逻辑里去：

源码地址

// 简化版
if (isAddOrDelete) {
  add(depsMap.get('length'))
}

把以前读取 length 时收集到的依赖拿到，而后触发函数。

这就一目了然了，咱们在 effect 里 map 操做读取了 length，收集了 length 的依赖。

在新增 key 的时候， 触发 length 收集到的依赖，触发回调函数便可。

对了，对于 for of 操做，也同样可行：

// 响应式数据
const data = reactive([])

// 观测变化
effect(() => {
  for (const val of data) {
    console.log('val', val)
  }
})

// ✅ 触发响应 打印出 val 1
data.push(1)

能够按咱们刚刚的小试验本身跑一下拦截, for of 也会触发 length 的读取。

length 真是个好同志…… 帮了大忙了。

遍历后删除或者清空

注意上面的源码里的判断条件是 isAddOrDelete，因此删除的时候也是同理，借助了 length 上收集到的依赖。

// 简化版
if (isAddOrDelete) {
  add(depsMap.get('length'))
}

const arr = reactive([1])
  
effect(() => {
  console.log('arr', arr.map(v => v))
})

// ✅ 触发响应 
arr.length = 0

// ✅ 触发响应 
arr.splice(0, 1)

真的是什么操做都能响应，爱了爱了。

获取 keys

const obj = reactive({ a: 1 })
  
effect(() => {
  console.log('keys', Reflect.ownKeys(obj))
})

effect(() => {
  console.log('keys', Object.keys(obj))
})

effect(() => {
  for (let key in obj) {
    console.log(key)
  }
})

// ✅ 触发全部响应 
obj.b = 2

这几种获取 key 的方式都能成功的拦截，其实这是由于 Vue 内部拦截了 ownKeys 操做符。

const ITERATE_KEY = Symbol( 'iterate' );

function ownKeys(target) {
    track(target, "iterate", ITERATE_KEY);
    return Reflect.ownKeys(target);
}

ITERATE_KEY 就做为一个特殊的标识符，表示这是读取 key 的时候收集到的依赖。它会被做为依赖收集的 key。

那么在触发更新时，其实就对应这段源码：

if (isAddOrDelete) {
    add(depsMap.get(isArray(target) ? 'length' : ITERATE_KEY));
}

其实就是咱们聊数组的时候，代码简化掉的那部分。判断非数组，则触发 ITERATE_KEY 对应的依赖。

小彩蛋：

Reflect.ownKeys、 Object.keys 和 for in 其实行为是不一样的，

Reflect.ownKeys 能够收集到 Symbol 类型的 key，不可枚举的 key。

举例来讲:

var a = {
  [Symbol(2)]: 2,
}

Object.defineProperty(a, 'b', {
  enumerable: false,
})

Reflect.ownKeys(a) // [Symbol(2), 'b']
Object.keys(a) // []

回看刚刚提到的 ownKeys 拦截，

function ownKeys(target) {
    track(target, "iterate", ITERATE_KEY);
    // 这里直接返回 Reflect.ownKeys(target)
    return  Reflect.ownKeys(target);
}

内部直接之间返回了 Reflect.ownKeys(target)，按理来讲这个时候 Object.keys 的操做通过了这个拦截，也会按照 Reflect.ownKeys 的行为去返回值。

然而最后返回的结果却仍是 Object.keys 的结果，这是比较神奇的一点。

删除对象属性

有了上面 ownKeys 的基础，咱们再来看看这个例子

const obj = reactive({ a: 1, b: 2})
  
effect(() => {
  console.log(Object.keys(obj))
})

// ✅ 触发响应 
delete obj['b']

这也是个神奇的操做，原理在于对于 deleteProperty 操做符的拦截：

function deleteProperty(target: object, key: string | symbol): boolean {
  const result = Reflect.deleteProperty(target, key)
  trigger(target, TriggerOpTypes.DELETE, key)
  return result
}

这里又用到了 TriggerOpTypes.DELETE 的类型，根据上面的经验，必定对它有一些特殊的处理。

其实仍是 trigger 中的那段逻辑：

const isAddOrDelete = type === TriggerOpTypes.ADD || type === TriggerOpTypes.DELETE
if (isAddOrDelete) {
  add(depsMap.get(isArray(target) ? 'length' : ITERATE_KEY))
}

这里的 target 不是数组，因此仍是会去触发 ITERATE_KEY 收集的依赖，也就是上面例子中刚提到的对于 key 的读取收集到的依赖。

判断属性是否存在

const obj = reactive({})

effect(() => {
  console.log('has', Reflect.has(obj, 'a'))
})

effect(() => {
  console.log('has', 'a' in obj)
})

// ✅ 触发两次响应 
obj.a = 1

这个就很简单了，就是利用了 has 操做符的拦截。

function has(target, key) {
  const result = Reflect.has(target, key);
  track(target, "has", key);
  return result;
}

性能

1. 首先 Proxy 做为浏览器的新标准，性能上是必定会获得厂商的大力优化的，拭目以待。
2. Vue3 对于响应式数据，再也不像 Vue2 中那样递归对全部的子数据进行响应式定义了，而是再获取到深层数据的时候再去利用 reactive 进一步定义响应式，这对于大量数据的初始化场景来讲收益会很是大。

好比，对于

const obj = reactive({
  foo: {
    bar: 1
  }
})

初始化定义 reactive 的时候，只会对 obj 浅层定义响应式，而真正读取到 obj.foo 的时候，才会对 foo 这一层对象定义响应式，简化源码以下：

function get(target: object, key: string | symbol, receiver: object) {
  const res = Reflect.get(target, key, receiver)
  // 这段就是惰性定义
  return isObject(res)
    ? reactive(res)
    : res
}

推荐阅读

其实 Vue3 对于 Map 和 Set 这两种数据类型也是彻底支持响应式的，对于它们的原型方法也都作了完善的拦截，限于篇幅缘由本文再也不赘述。

说实话 Vue3 的响应式部分代码逻辑分支仍是有点过多，对于代码理解不是很友好，由于它还会涉及到 readonly 等只读化的操做，若是看完这篇文章你对于 Vue3 的响应式原理很是感兴趣的话，建议从简化版的库入手去读源码。

这里我推荐 observer-util，我解读过这个库的源码，和 Vue3 的实现原理基本上是如出一辙！可是简单了不少。麻雀虽小，五脏俱全。里面的注释也很齐全。

固然，若是你的英文不是很熟练，也能够看我精心用 TypeScript + 中文注释基于 observer-util 重写的这套代码：
typescript-proxy-reactive

对于这个库的解读，能够看我以前的两篇文章：

带你完全搞懂Vue3的Proxy响应式原理！TypeScript从零实现基于Proxy的响应式库。

带你完全搞懂Vue3的Proxy响应式原理！基于函数劫持实现Map和Set的响应式

在第二篇文章里，你也能够对于 Map 和 Set 能够作什么拦截操做，得到源码级别的理解。

总结

Vue3 的 Proxy 真的很强大，把 Vue2 里我认为心智负担很大的一部分给解决掉了。（在我刚上手 Vue 的时候，我是真的不知道什么状况下该用 $set），它的 composition-api 又能够完美对标 React Hook，而且得益于响应式系统的强大，在某些方面是优胜于它的。精读《Vue3.0 Function API》

但愿这篇文章能在 Vue3 正式到来以前，提早带你熟悉 Vue3 的一些新特性。

扩展阅读

Proxy 的拦截器里有个 receiver 参数，在本文中为了简化没有体现出来，它是用来作什么的？国内的网站比较少能找到这个资料：

new Proxy(raw, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver)
  }
})

能够看 StackOverflow 上的问答：what-is-a-receiver-in-javascript

也能够看个人总结
Proxy 和 Reflect 中的 receiver 究竟是什么？

广告时间

优秀的小册做者修言大佬为前端想学算法的小伙伴们推出了一本零基础也能入门的算法小册，帮助你掌握一些基础算法核心思想或简单算法问题，这本小册我参与了内测过程，也给修言大大提出了不少意见。他的目标就是作面向算法零基础前端人群的「保姆式服务」，很是贴心了~

求点赞

若是本文对你有帮助，就点个赞支持下吧，你的「赞」是我持续进行创做的动力，让我知道你喜欢看个人文章吧~

❤️感谢你们

关注公众号「前端从进阶到入院」便可加我好友，我拉你进「前端进阶交流群」，你们一块儿共同交流和进步。