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

🕗 发布于 2024-07-10 04:52 javascript vue3 es6 vue.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(...)。

这里的三个参数分别是：

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

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

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

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

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

整个流程其实就是：

用p代理了fn
传入123，被apply拦截
在拦截的逻辑里执行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++，不会触发副作用函数，这是为什么？

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

执行effect，那么会输出p.bar，那么会触发get拦截
在track中，target是obj，key是字符串bar，也就是obj的bar会和当前effect建立联系（这一步不重要）
返回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对象部署的所有内部方法

内部方法	处理器函数	使用场景
[[GetPrototypeOf]]	getPrototypeOf	获取对象原型
[[SetPrototypeOf]]	setPrototypeOf	设置对象原型
[[IsExtensible]]	isExtensible	判断对象是否可以新增属性
[[PreventExtensions]]	preventExtensions	阻止对象新增属性
[[GetOwnProperty]]	getOwnProperty	获取对象自有属性的属性描述符
[[DefineOwnProperty]]	defineProperty	定义对象新属性或修改现有属性，返回镀锡
[[HasProperty]]	has	判断对象是否有指定的属性
[[Get]]	get	获取对象的属性值
[[Set]]	set	设置对象的属性值
[[Delete]]	deleteProperty	删除对象的属性
[[OwnPropertyKeys]]	ownKeys	获取对象所有自有属性的键
[[Call]]	apply	调用函数
[[OwnPropertyKeys]]	Construct	创建一个新的实例

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

在书上的例子是举例了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里的方法是一样的名字

问题总结

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

原文地址：https://blog.csdn.net/weixin_44001222/article/details/140237321

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：构建工具和自动化：Maven、Gradle及CI/CD实践
下一篇：koa + http-proxy-middleware 搭建一个带转发的静态服务器

Ubuntu上安装Miniconda并自定义环境存储路径
Miniconda是Anaconda的精简版本，它包含了conda、Python和一些基本包。相比完整的Anaconda发行版，Miniconda占用更少的磁盘空间，并允许用户只安装他们需要的包。通过
阅读更多2024-10-04
大模型使用vLLM推理加速
在使用vLLM进行模型推理时，即使你不显式调用tokenizervLLM也会自动处理 tokenization。vLLM内部会使用模型对应的tokenizer来对输入文本进行 tokenization
阅读更多2024-10-04
redis的数据结构，内存处理，缓存问题
redis任意数据的key和value都会被封装为一个RedisObject，也叫redis对象：这就redis的头信息，占有16个字节。
阅读更多2024-10-04
Vue3 工具函数（总结）
在 Vue 3 中，除了核心的响应式 API（如refreactivecomputed等），Vue 还提供了许多工具函数，用于处理不同的场景和需求。这些工具函数在vue包中可以直接导入使用，它们帮助开
阅读更多2024-10-04
Oracle datafile 数目限制是多少
3万多都没问题Oracle Database - Enterprise Edition - Version 18.13.0.0.0 and later。
阅读更多2024-10-04
【微服务】初识（day1）
对架构演进以及SpringCloud进行了简单概述.
阅读更多2024-10-04
RabbitMQ 7种工作模式详解及应用场景
RabbitMQ 是一个广泛使用的开源消息代理和队列服务器，支持多种消息传递模式。以下是RabbitMQ提供的7种主要的工作模式及其应用场景的详细介绍。
阅读更多2024-10-04
集中式架构和分布式架构
数据是企业的核心资产和战略资源。面对爆炸性的数据增长，如何有效地组织、管理和利用数据成为企业的重大挑战。数据架构作为企业数据管理的蓝图和框架，发挥重要作用。本文就来详细说下当下主流的两种数据架构的类型
阅读更多2024-10-04
Vue 中的路由：构建强大的单页应用导航
Vue Router 是 Vue.js 的官方路由管理器。它与 Vue.js 的核心深度集成，允许我们通过定义路由来实现不同页面之间的切换，而无需刷新整个页面。这使得用户体验更加流畅，同时也提高了应用
阅读更多2024-10-04
“衣依”服装销售平台：Spring Boot框架的设计与实现
在整个系统测试中，根据需求文档和设计文档，逐一对功能进行检测并写好测试用例，有效避免残片缺陷，因为产品出现缺陷不仅影响功能，而且可以导致数据的不准确，导致产品质量的降低，经过测试，才能使得产品的稳定性
阅读更多2024-10-04