《Vue进阶教程》（12）ref的实现详细教程

server/2024/12/26 13:39:48/

1 为什么需要ref

由于proxy只能代理引用类型数据(如: 对象, 数组, Set, Map...), 需要一种方式代理普通类型数据(String, Number, Boolean...)

设计ref主要是为了处理普通类型数据, 使普通类型数据也具有响应式

除此之外, 通过reactive代理的对象可能会出现响应丢失的情况. 使用ref可以在一定程度上解决响应丢失问题

2 初步实现

1) 包裹对象

既然proxy不能代理普通类型数据, 我们可以在普通类型数据的外层包裹一个对象

用proxy代理包裹的对象(wrapper). 为了统一, 给包裹对象定义value属性, 最后返回wrapper的代理对象

function ref(value) {const wrapper = {value: value,}return reactive(wrapper)
}

测试用例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./reactive.js"></script></head><body><script>function ref(value) {const wrapper = {value: value,}return reactive(wrapper)}// count是一个proxy对象const count = ref(1)effect(() => {// 访问proxy对象的属性 触发 getter 收集依赖console.log(count.value)})setTimeout(() => {count.value = 2}, 1000)</script></body>
</html>

2) 添加标识

按照上面的实现, 我们就无法区分一个代理对象是由ref创建, 还是由reactive创建, 比如下面的代码

ref(1)
reactive({value: 1})

为了后续能够对ref创建的代理对象自动脱ref处理, 即不用.value访问.

考虑给ref创建的代理对象添加一个标识

示例

function ref(value) {const wrapper = {value: value,}// 给wrapper添加一个不可枚举, 不可写的属性__v_isRefObject.defineProperty(wrapper, '__v_isRef', {value: true,})return reactive(wrapper)
}

在Vue3源码中, 虽然不是按上述方式实现的, 但是可以这样去理解

3 响应丢失问题

将reactive定义的代理对象赋值给其它变量时, 会出现响应丢失问题

赋值主要有如下三种情况:

  1. 如果将reactive定义的代理对象的属性赋值给新的变量, 新变量会失去响应性
  2. 如果对reactive定义的代理对象进行展开操作. 展开后的变量会失去响应性
  3. 如果对reactive定义的代理对象进行解构操作. 解构后的变量会失去响应性

1) 赋值操作

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./reactive.js"></script></head><body><script>const obj = reactive({ foo: 1, bar: 2 })// 将reactive创建的代理对象的属性赋值给一个新的变量foolet foo = obj.foo // foo此时就是一个普通变量, 不具备响应性effect(() => {console.log('foo不具备响应性...', foo)})foo = 2</script></body>
</html>
  • obj.foo表达式的返回值是1
  • 相当于定义了一个普通变量foo, 而普通变量是不具备响应性的

2) 展开操作

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./reactive.js"></script></head><body><script>const obj = reactive({ foo: 1, bar: 2 })// 展开运算符应用在proxy对象上, 会从语法层面遍历源对象的所有属性// ...obj ===> foo:1, bar:2const newObj = {...obj,}// 此时的newObj是一个新的普通对象, 和obj之间不存在引用关系console.log(newObj) // {foo:1, bar:2}effect(() => {console.log('newObj没有响应性...', newObj.foo)})// 改变newObj的属性值, 不会触发副作用函数的重新执行// 此时, 我们就说newObj失去了响应性newObj.foo = 2</script></body>
</html>

说明

这里对proxy对象展开会经历如下过程

  1. proxy对象属于异质对象(exotic object)
  2. 当没有自定义proxy对象的[[GetOwnProperty]]内部方法时, 会使用源对象的方法, 获取所有属性
  3. 调用GetValue, 获取属性值

参考文献

ECMAScript规范2022-对象初始化

2) 解构操作

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./reactive.js"></script></head><body><script>const obj = reactive({ foo: 1, bar: 2 })// 对proxy对象进行解构操作后, foo和bar就是普通变量, 也失去了响应性let { foo, bar } = objeffect(() => {console.log('foo不具备响应性', foo)})// 给变量foo赋值, 不会触发副作用函数重新执行foo = 2</script></body>
</html>

对proxy对象解构后, foo就是一个普通变量, 也失去了跟obj的引用关系.

因此, 对foo的修改不会触发副作用函数重新执行

4 toRef与toRefs

1) 基本使用

为了解决在赋值过程中响应丢失问题, Vue3提供了两个API

  • toRef: 解决赋值问题
  • toRefs: 解决展开, 解构问题

使用演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://unpkg.com/vue@3.2.41/dist/vue.global.js"></script></head><body><script>const { reactive, effect, toRef, toRefs } = Vue// obj是reactive创建的响应式数据(proxy代理对象)const obj = reactive({ foo: 1, bar: 2 })effect(() => {console.log('obj.foo具有响应性:', obj.foo)})// 使用toRef定义, 取代基本赋值操作 foo = obj.fooconst foo = toRef(obj, 'foo')effect(() => {console.log('foo.value具有响应性:', foo.value)})</script></body>
</html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://unpkg.com/vue@3.2.41/dist/vue.global.js"></script></head><body><script>const { reactive, effect, toRef, toRefs } = Vue// obj是reactive创建的响应式数据(proxy代理对象)const obj = reactive({ foo: 1, bar: 2 })// 使用toRefs解构赋值 取代 {foo, bar} = objconst { foo, bar } = toRefs(obj)effect(() => {console.log('bar.value具有响应性', bar.value)})</script></body>
</html>

2) toRef的实现

基本实现

function toRef(obj, key) {const wrapper = {get value() {return obj[key]},set value(val) {obj[key] = val},}Object.defineProperty(wrapper, '__v_isRef', {value: true,})return wrapper
}

在Vue3中, 将wrapper抽象成了ObjectRefImpl类的实例, 大致的实现如下

class ObjectRefImpl {constructor(_obj, _key) {this._obj = _objthis._key = _keythis.__v_isRef = true}get value() {return this._obj[this._key]}set value(newVal) {this._obj[this._key] = newVal}
}function toRef(obj, key) {return new ObjectRefImpl(obj, key)
}

源码解读

  1. 源码中的toRef实现了默认值的功能
  2. 源码中的toRef对要转换的数据做了判断, 如果已经是ref类型就直接返回
class ObjectRefImpl {// 支持默认值constructor(_object, _key, _defaultValue) {this._object = _objectthis._key = _keythis._defaultValue = _defaultValuethis.__v_isRef = true}get value() {const val = this._object[this._key]return val === undefined ? this._defaultValue : val}set value(newVal) {this._object[this._key] = newVal}
}
// 1. 支持默认值
function toRef(object, key, defaultValue) {const val = object[key]// 2. 如果要转换的对象已经是ref类型, 直接返回//    eg: state = reactive({foo: ref(1)}) state.foo已经是ref类型, 直接返回ref(1)return isRef(val) ? val : new ObjectRefImpl(object, key, defaultValue)
}

测试用例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./reactive.js"></script></head><body><script>// obj是响应式数据const obj = reactive({ foo: 1, bar: 2 })const foo = toRef(obj, 'foo')effect(() => {console.log('foo.value具备响应性:', foo.value)})</script></body>
</html>

3) toRefs的实现

基本实现

function toRefs(obj) {const ret = {}for (const key in obj) {ret[key] = toRef(obj, key)}return ret
}

原码解读

  1. 源码中对obj的类型做了判断
    1. 如果不是reactive类型的对象, 提示警告
    2. 支持代理是数组的情况
function toRefs(object) {// 如果传入的对象不具备响应性, 提示警告if (!isProxy(object)) {console.warn(`toRefs() expects a reactive object but received a plain one.`)}// 支持代理是数组的情况//   - 对象的情况: toRefs(reactive({foo: 1, bar: 2})) => {foo: ref(1), bar: ref(2)}//   - 数组的情况: toRefs(reactive(['foo', 'bar'])) => [ref('foo'), ref('bar')]const ret = isArray(object) ? new Array(object.length) : {}for (const key in object) {ret[key] = toRef(object, key)}return ret
}

测试用例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./reactive.js"></script></head><body><script>// obj是响应式数据const obj = reactive({ foo: 1, bar: 2 })// 解构赋值const { foo, bar } = toRefs(obj)effect(() => {console.log('foo.value具备响应性:', foo.value)})</script></body>
</html>

5 自动脱ref

1) 什么是自动脱ref

所谓自动脱ref, 就是不写.value

对于ref类型数据, 每次在访问时, 需要加.value才能触发响应式.

但是这样做无疑增加了心智负担, 尤其是在写模板时, 不够优雅

为此, Vue3提供一个API: proxyRefs

对传入的ref类型对象进行代理, 返回proxy对象

个人理解: 有点类似toRefs的逆操作??

2) 基本使用

使用演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./vue.js"></script></head><body><script>const { ref, proxyRefs, effect } = Vueconst count = ref(0)// 1.模拟setup的返回对象// setup函数返回的对象会经过proxyRefs处理// 这样在模板中就不用写.value了const setup = proxyRefs({count,})// 2.模拟页面渲染effect(() => {console.log('不用通过.value访问', setup.count)})</script></body>
</html>

3) proxyRefs的实现

基本实现

function proxyRefs(objectWithRefs) {return new Proxy(objectWithRefs, {get(target, key, receiver) {// 使用Reflect读取target[key]const obj = Reflect.get(target, key, receiver)// 如果obj是ref类型, 返回obj.value; 否则, 直接返回return obj.__v_isRef ? obj.value : obj},set(target, key, newVal, receiver) {const obj = target[key]if (obj.__v_isRef) {obj.value = newValreturn obj}return Reflect.set(target, key, newVal, receiver)},})
}

源码解读

  1. 源码对传入参数加强了判断
    1. 如果objectWithRefs已经是reactive类型, 就直接使用
  1. 源码按功能进一步细化, 可读性更高
    1. unref函数可以复用: 如果是ref返回.value; 否则直接返回
    2. 将proxy的handler提取成shallowUnwrapHandlers函数
    3. 在set时, 加入了新旧值类型的判断, 更严谨
function unref(ref) {return isRef(ref) ? ref.value : ref
}
const shallowUnwrapHandlers = {get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),set: (target, key, value, receiver) => {const oldValue = target[key]if (isRef(oldValue) && !isRef(value)) {oldValue.value = valuereturn true} else {return Reflect.set(target, key, value, receiver)}},
}
function proxyRefs(objectWithRefs) {return isReactive(objectWithRefs)? objectWithRefs: new Proxy(objectWithRefs, shallowUnwrapHandlers)
}

6 改造

按照vue的源码进行改造

function isObject(val) {return typeof val === 'object' && val !== null
}
function toReactive(value) {return isObject(value) ? reactive(value) : value
}
class RefImpl {constructor(value) {this.dep = new Set()this._rawValue = valuethis.__v_isRef = truethis._value = toReactive(value)}get value() {trackEffects(this.dep)return this._value}set value(newValue) {if (this._rawValue != newValue) {this._rawValue = newValuethis._value = toReactive(newValue)triggerEffects(this.dep)}}
}
function ref(val) {return new RefImpl(val)
}


http://www.ppmy.cn/server/153329.html

相关文章

阿里巴巴2017实习生笔试题（二）

阿里巴巴2017实习生笔试题（二）

阿里巴巴2017实习生笔试题&#xff08;二&#xff09; 2024/12/25 1.下面哪一个不是动态链接库的优点&#xff1f; B A.共享 B.装载速度快 C.开发模式好 D.减少页面交换 解析 1 静态链接库的优点 (1) 代码装载速度快&#xff0c;执行速度略比动态链接库快&#xff1b;…
阅读更多...
网站服务器被攻击了怎么办？

网站服务器被攻击了怎么办？

当网站服务器被攻击时&#xff0c;可能会出现各种问题&#xff0c;如服务中断、数据泄露、恶意软件感染等。如果不及时采取措施&#xff0c;可能会给企业带来严重的损失。因此&#xff0c;当网站服务器被攻击时&#xff0c;企业需要采取以下措施来应对&#xff1a; 一、快速定…
阅读更多...
MYSQL 架构

MYSQL 架构

MySQL 架构设计灵活&#xff0c;采用模块化的分层架构&#xff0c;分为三大层次&#xff1a;连接层、服务层 和 存储引擎层。这种设计让 MySQL 能够适应不同的使用场景并支持多种存储引擎&#xff0c;以下是对其架构的详细解析&#xff1a; 1. 连接层&#xff08;Connection La…
阅读更多...
Vue3中使用Router进行路由配置（图文详情）

Vue3中使用Router进行路由配置（图文详情）

Vue3中使用Router进行路由配置 Vue Router 简介 Vue Router 是 Vue.js 官方的路由管理器&#xff0c;它允许您在单页面应用程序&#xff08;SPA, Single Page Application&#xff09;中实现导航和页面切换&#xff0c;而无需重新加载整个页面。通过 Vue Router&#xff0c;您…
阅读更多...
undefined reference to `vtable for错误

undefined reference to `vtable for错误

QT构建报错&#xff1a; D:\code\QGraphicsScaleTest\main.cpp:-1: error: undefined reference to vtable for ResizableSvgViewVS编译报错&#xff1a; 1>main.obj : error LNK2001: 无法解析的外部符号 "public: virtual struct QMetaObject const * __cdecl Resi…
阅读更多...
大模型讲师叶梓分享前沿论文：ChatDoctor——基于大模型的医疗聊天机器人

大模型讲师叶梓分享前沿论文：ChatDoctor——基于大模型的医疗聊天机器人

人工智能咨询培训老师叶梓 转载标明出处 人工智能讲师培训咨询老师叶梓分享前沿技术&#xff1a;基于大模型的医疗聊天机器人 大模型在医疗领域的应用仍相对有限&#xff0c;通用领域模型在提供医疗建议时常常出现错误。为了解决这一问题&#xff0c;Li等人提出了一个名为ChatD…
阅读更多...
Java全栈项目 - 智能考勤管理系统

Java全栈项目 - 智能考勤管理系统

项目介绍 智能考勤管理系统是一个基于 Java 全栈技术开发的现代化企业考勤解决方案。该系统采用前后端分离架构&#xff0c;实现了员工考勤、请假管理、统计分析等核心功能&#xff0c;旨在帮助企业提高人力资源管理效率。 技术栈 后端技术 Spring Boot 2.6.xSpring Securi…
阅读更多...
golang实现yaml配置文件的解析

golang实现yaml配置文件的解析

原文地址&#xff1a;golang实现yaml配置文件的解析 – 无敌牛 欢迎参观我的个人博客&#xff1a;无敌牛 – 技术/著作/典籍/分享等 代码 需要建立3个文件&#xff0c;目录结构如下&#xff1a; 配置文件 conf.yaml redis: host: "127.0.0.1"port: 6379db: 11 …
阅读更多...
最新文章

Copyright @ 2022~2023