Vue 3源码极客之：`Vue`的`readonly`：它如何递归地创建只读代理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女们，晚上好！我是你们的老朋友，代码界的老司机。今天咱们聊聊Vue 3源码里一个挺有意思的小东西：readonly。

readonly，顾名思义，就是让一个对象变成“只读”的。听起来简单，但Vue 3的实现可没那么粗暴，它用了一种很巧妙的方式，递归地创建只读代理。这就像给你的对象穿上了一层层的盔甲，让你想修改都无从下手。

准备好了吗？咱们这就开车，深入源码，扒一扒readonly的底裤！

一、readonly的用途和基本概念

在Vue 3中，readonly主要用于以下场景：

防止意外修改: 确保数据状态的不可变性，避免组件或模块不小心修改了数据。
优化性能: Vue可以跳过对只读数据的依赖追踪，因为它们不可能改变。
状态管理: 在一些状态管理方案中，readonly可以用来保护状态的安全性。

简单来说，readonly就是创建了一个原始对象的只读代理。这个代理会拦截所有尝试修改对象的操作，并抛出一个错误。

二、readonly的实现原理

Vue 3的readonly实现基于Proxy，这是JavaScript ES6提供的一个强大的特性，可以拦截对象的操作。

其核心逻辑如下：

创建Proxy: 使用Proxy包装原始对象。
拦截set操作: 当尝试设置属性值时，Proxy会拦截这个操作，并抛出一个错误。
递归处理: 如果属性值本身是一个对象，那么递归地对该对象应用readonly。

三、readonly源码解析

我们来看一下Vue 3源码中readonly的核心部分（简化版）：

//packages/reactivity/src/reactive.ts

import { mutableHandlers, readonlyHandlers, shallowReadonlyHandlers } from './baseHandlers'
import { isObject } from '@vue/shared'

// 创建一个只读的 reactive 对象
export function readonly(target: object) {
  return createReactiveObject(
    target,
    readonlyHandlers
  )
}

// 创建 reactive 对象的核心函数
function createReactiveObject(
  target: object,
  baseHandlers: ProxyHandler<any>
) {
  if (!isObject(target)) {
    console.warn(`value cannot be made reactive: ${String(target)}`)
    return target
  }
  return new Proxy(target, baseHandlers)
}

//定义 readonly 的 handler
const readonlyHandlers: ProxyHandler<object> = {
  get(target: object, key: string | symbol, receiver: object) {
    const res = Reflect.get(target, key, receiver)

    // 递归处理，如果 res 是一个对象，那么递归地 readonly
    if (isObject(res)) {
      return readonly(res)
    }

    return res
  },
  set(target: object, key: string | symbol, value: any, receiver: object) {
    console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target)
    return true
  },
  deleteProperty(target: object, key: string | symbol): boolean {
    console.warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target)
    return true
  },
}

// shallowReadonly，只对第一层进行 readonly 处理
const shallowReadonlyHandlers: ProxyHandler<object> = {
    get(target: object, key: string | symbol, receiver: object) {
      const res = Reflect.get(target, key, receiver)
      return res
    },
    set(target: object, key: string | symbol, value: any, receiver: object) {
      console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target)
      return true
    },
    deleteProperty(target: object, key: string | symbol): boolean {
      console.warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target)
      return true
    },
}

代码解读：

readonly(target): 这是readonly函数的入口，它调用createReactiveObject来创建只读的Proxy对象。
createReactiveObject(target, readonlyHandlers): 创建Proxy的核心函数。它接收一个目标对象和一个handler对象，readonlyHandlers定义了Proxy如何拦截操作。
readonlyHandlers: 这个handler对象定义了get、set和deleteProperty三个方法，分别用于拦截读取、设置和删除属性的操作。
- get: 读取属性时，会先从原始对象中获取值，如果这个值还是一个对象，那么递归地调用readonly函数，将其也变成只读的。
- set: 尝试设置属性时，会抛出一个警告，告诉开发者这个对象是只读的，不允许修改。
- deleteProperty: 尝试删除属性时，同样会抛出一个警告。
shallowReadonlyHandlers: 这是一个“浅只读”的handler，它只对对象的第一层属性进行只读处理，不会递归处理嵌套对象。

四、代码示例

我们来写一些代码示例，更好地理解readonly的用法：

import { readonly } from 'vue'

const original = {
  foo: 1,
  bar: {
    baz: 2,
  },
}

const wrapped = readonly(original)

// 读取属性是没问题的
console.log(wrapped.foo) // 输出：1

// 尝试修改属性会报错
try {
  wrapped.foo = 2 // 报错：Set operation on key "foo" failed: target is readonly.
} catch (error) {
  console.error(error)
}

// 尝试修改嵌套对象的属性也会报错
try {
  wrapped.bar.baz = 3 // 报错：Set operation on key "baz" failed: target is readonly.
} catch (error) {
  console.error(error)
}

// shallowReadonly 的例子
import { shallowReadonly } from 'vue'

const original2 = {
  foo: 1,
  bar: {
    baz: 2,
  },
}

const wrapped2 = shallowReadonly(original2)

// 读取属性是没问题的
console.log(wrapped2.foo) // 输出：1

// 尝试修改第一层属性会报错
try {
  wrapped2.foo = 2 // 报错：Set operation on key "foo" failed: target is readonly.
} catch (error) {
  console.error(error)
}

// 尝试修改嵌套对象的属性不会报错！
wrapped2.bar.baz = 3
console.log(wrapped2.bar.baz) // 输出：3

代码解读：

我们首先创建了一个原始对象original，然后使用readonly函数将其包装成一个只读对象wrapped。
尝试修改wrapped的任何属性，包括嵌套对象的属性，都会抛出一个错误。
shallowReadonly只对第一层属性进行只读处理，嵌套对象的属性仍然可以修改。

五、Proxy Handler方法详解

为了更深入地理解readonly的实现，我们来详细看一下Proxy handler中的几个关键方法：

Handler方法	作用
`get(target, key, receiver)`	拦截读取属性的操作。`target`是目标对象，`key`是要读取的属性名，`receiver`是Proxy对象本身。返回值就是读取到的属性值。
`set(target, key, value, receiver)`	拦截设置属性的操作。`target`是目标对象，`key`是要设置的属性名，`value`是要设置的属性值，`receiver`是Proxy对象本身。返回值是一个布尔值，表示设置操作是否成功。在`readonly`中，我们始终返回`true`，但同时抛出一个错误。
`deleteProperty(target, key)`	拦截删除属性的操作。`target`是目标对象，`key`是要删除的属性名。返回值是一个布尔值，表示删除操作是否成功。在`readonly`中，我们始终返回`true`，但同时抛出一个错误。

六、readonly与reactive的对比

readonly和reactive是Vue 3中两个非常重要的API，它们都基于Proxy实现，但用途却截然不同。

特性	`reactive`	`readonly`
作用	创建一个可变的响应式对象。	创建一个只读的响应式对象。
修改属性	允许修改属性值。	禁止修改属性值，会抛出错误。
依赖追踪	会追踪属性的读取和修改，用于更新视图。	只追踪属性的读取，不会追踪修改。
应用场景	用于管理组件的状态，允许修改数据。	用于保护数据，防止意外修改，优化性能。

简单来说，reactive让你拥有一个可以随意捏的泥人，而readonly则给你一个雕塑，只能看不能摸。

七、shallowReadonly的用途

shallowReadonly，顾名思义，就是“浅只读”。它只对对象的第一层属性进行只读处理，不会递归处理嵌套对象。

那么，shallowReadonly有什么用呢？

性能优化: 递归的readonly可能会带来一些性能开销，特别是对于大型嵌套对象。shallowReadonly可以避免这种开销，只对第一层属性进行保护。
特定场景: 在某些场景下，我们只需要保护对象的第一层属性不被修改，而允许修改嵌套对象的属性。shallowReadonly可以满足这种需求。

举个例子，假设你有一个配置对象，其中包含一些全局配置，你希望这些全局配置不能被随意修改，但允许用户修改配置中的一些细节设置。这时，shallowReadonly就非常适合。

八、readonly的局限性

虽然readonly很强大，但它也有一些局限性：

只读是“浅”只读: 虽然readonly会递归地处理嵌套对象，但如果嵌套对象本身是一个非响应式的普通对象，那么readonly就无法阻止对该对象的修改。
```
const original = {
  foo: 1,
  bar: {
    baz: 2, // 这是一个普通对象
  },
}

const wrapped = readonly(original)

// 可以修改 bar.baz，因为 bar 不是一个响应式对象
wrapped.bar.baz = 3
console.log(wrapped.bar.baz) // 输出：3
```
要解决这个问题，你需要确保所有嵌套对象都是响应式的，可以使用reactive或readonly将其包装起来。
无法阻止对原始对象的修改: readonly创建的是一个代理对象，它只能阻止通过代理对象修改属性。如果直接修改原始对象，readonly就无能为力了。
```
const original = {
  foo: 1,
}

const wrapped = readonly(original)

// 可以直接修改原始对象
original.foo = 2
console.log(original.foo) // 输出：2
console.log(wrapped.foo) // 输出：2 (因为 wrapped 是 original 的代理)
```
要避免这个问题，你应该尽量避免直接操作原始对象，而是通过代理对象来访问和修改数据。

九、总结

好啦，各位靓仔靓女们，今天的readonly源码之旅就到这里了。我们一起深入了解了readonly的用途、实现原理、源码结构、代码示例以及局限性。

希望通过今天的学习，你们对Vue 3的readonly有了更深刻的理解，能够在实际项目中更好地运用它，写出更安全、更健壮的代码。

记住，readonly就像是给你的数据穿上了一层盔甲，保护它们免受意外修改的侵害。但同时，也要注意它的局限性，避免掉入陷阱。

最后，送给大家一句话：代码虐我千百遍，我待代码如初恋。

下课！

发表回复 取消回复

发表回复取消回复