Vue3.js“非原始值”响应式实现基本原理笔记（一）

如果您觉得这篇文章有帮助的话！给个点赞和评论支持下吧，感谢~

作者：前端小王hs

阿里云社区博客专家/清华大学出版社签约作者/csdn百万访问前端博主/B站千粉前端up主

此篇文章是博主于2022年学习《Vue.js设计与实现》时的笔记整理而来

书籍：《Vue.js设计与实现》 作者：霍春阳

本篇博文将在书第5.1节至5.4节的基础上进一步总结所提到的基础概念，附加了测试的代码运行示例，方便正在学习Vue3或想分析Vue3源码的朋友快速阅读

如有帮助，不胜荣幸

5.1 Proxy和Reflect

代理与被代理

5.1节开篇给到了一个信息：Proxy 只能代理对象，无法代理非对象值，例如字符串、布尔值等（原文）

关于什么是代理，可以举个简单的例子，有a和b两个对象，如果我们想通过b去访问a里的属性，那么这个b就是代理

可以理解这个b为中介，而这个b，就是new Proxy的proxy对象，如下代码所示：

const b = new Proxy(a, {
})

对象a就是被代理对象（a被b代理了），位于new Proxy第一个参数，而（new Proxy，下同）第二个参数是一个对象，里面包含了如get()、set()之类的拦截方法，关于这一点，在之前的笔记中深入理解Vue3.js响应式系统基础逻辑也提到了

代理的作用

代理的作用在于可以拦截一些基本操作，如读取、修改对象等

逻辑也非常简单，原来通过a.foo可以访问到a对象里的foo属性，现在代理了就变成通过b.foo去访问了，当访问时就会触发第二个参数里设置的如get()、set()之类的拦截方法，那么经过这些方法的拦截，就可以进行一些额外的操作，例如前文笔记里提到的响应式

Proxy拦截函数

函数也是对象，那么同理可以把一个函数fn当作a变为被代理对象，那么同理，当调用fn时会触发第二个参数内的拦截方法

apply与call

书中举例了一个使用代理对象去调用fn的例子，代码如下：

function fn(name) {
    return '我是：' + name;
}

// 使用 Proxy 拦截对 fn 的调用  
const p = new Proxy(fn, {
    apply(target, thisArg, argArray) {
        return target.call(thisArg, ...argArray);
    }
})

p('123') // 我是123

这里的apply是proxy支持的13个拦截方法之一，在阮一峰大佬的ES6中对apply也有详细的介绍：

apply(target, object, args) ：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

这里的三个参数分别是：

1. target：目标对象
2. object：目标对象的上下文对象（this）
3. args：目标对象的参数数组

回看上面的例子，apply接收的三个形参的内容分别是：fn、this（undefined）、包含123的参数数组

接着返回了target.call(thisArg, ...argArray);，也就是fn.call(undefined，'123')，或者说fn('123')

这里的一个问题是，我们知道此时this指向的是调用者（使用了call），也就是fn，那第一个参数thisArg其实也就没有发挥作用，或者说一直都是undefined

这里其实有个潜在条件就是，使用proxy.apply的基本场景就是去拦截函数

整个流程其实就是：

1. 用p代理了fn
2. 传入123，被apply拦截
3. 在拦截的逻辑里执行fn('123')

Reflect的作用

Proxy的方法，在Reflect都能找到，也就是说Proxy有get，Reflect里也有

Reflect.get(target, name, receiver)和Reflect.set(target, name, value, receiver)的作用和Proxy内的get、set相同

书中提到Reflect的原因是，使用target即原始对象去完成对属性的读取，无法完成与副作用函数的绑定

我们来分析一下书中的例子，下面是代码：

const obj = {
  foo: 1,
  get bar() {
    return this.foo;
  }
};  

const p = new Proxy(obj, {
  get(target, key) {
    track(target, key);
    return target[key];
  },
  set(target, key, newVal) {  
    target[key] = newVal;
    trigger(target, key);
  }  
});  

effect(() => {
  console.log(p.bar);
});  

p.foo++;

这段代码的问题是，执行p.foo++，不会触发副作用函数，这是为什么？

直接看当前的执行逻辑是怎么样的：

1. 执行effect，那么会输出p.bar，那么会触发get拦截
2. 在track中，target是obj，key是字符串bar，也就是obj的bar会和当前effect建立联系（这一步不重要）
3. 返回target[key]，那么触发getter，此时这里的this是指obj，也就是最终返回的是obj.foo给副作用函数

effect(()=>{ obj.foo })

也就是说，匿名函数输出p.bar，返回的是obj.foo，那就很好理解了，obj不是代理对象，在副作用函数里输出obj.foo不会触发Proxy.get拦截，自然就不会与副作用函数进行联系了

解决的办法就是使用Reflect.get(target, key, receiver)代替target[key]

Reflect.get(target, key, receiver)返回也是obj.foo，但它的第三个参数receiver可以指出是谁在调用

那么代码就更新如下：

const p = new Proxy(obj, {
  get(target, key，receiver) {
    track(target, key);
    return Reflect.get(target, key, receiver);
  },
  // ...
}); 

那么现在，就可以把obj.foo变为p.foo了

5.2 JavaScript 对象及 Proxy 的工作原理

对象分为两种，常规对象和异质对象

区分常规对象和异质对象的区别在于其内部方法是使用ECMA的哪一种规范决定的，这里不去详细赘述。需要明白的是Proxy是一个异质对象

如何区分普通对象和函数对象呢？文中提到：对象的实际语义是由对象的内部方法（internal method）指定的（原文）

最简单的一个区分方法是，函数对象有call()方法

内部方法具有多态性

在书中提到了代理透明性质，也就是如果定义了一个代理对象p，但是内部没有指定get()，那么通过p去访问被代理对象的某个属性，会调用原始对象的内部方法[[Get]]。这一点在阮一峰的ES6关于proxy.get一节也有记载

Proxy对象部署的所有内部方法

书上的表格无使用场景，这里加上便于理解

在书上的例子是举例了deleteProperty，代码如下：

const obj = { foo: 1 }
const p = new Proxy(obj, {
  deleteProperty(target, key) {
    return Reflect.deleteProperty(target, key)
  }
})

console.log(p.foo) // 1
delete p.foo
console.log(p.foo) // undefined

那么需要注意的是deleteProperty是Proxy对象即p的内部方法，只有删除p的属性时才会被调用，其实就和p读取obj属性时才会调用get一个意思。在上述代码中，上下文环境要删除的是obj.foo，所以调用了Reflect.deleteProperty，回想一下，Proxy的方法和Reflect里的方法是一样的名字

问题总结

1. JS中的代理是什么
2. 结合Vue3响应式理解apply和call
3. 了解ES6的Reflect在拦截函数中的作用
4. 什么是常规对象和异质对象？
5. 如何区分普通对象和函数对象
6. Proxy对象的内部方法及其使用场景