深入分析 Vue 3 源码中 `reactive` 对象的 `isShallow` 和 `isReadonly` 标志位 (`__v_isShallow`, `__v_isReadonly`) 的实现，以及它们如何控制 `Proxy` 的行为。

各位观众，大家好！欢迎来到今天的“Vue 3 源码探秘”特别节目。今天我们要深入探讨Vue 3 reactive 对象的两个神秘标志位：__v_isShallow 和 __v_isReadonly，看看它们是如何操纵 Proxy 的行为，让我们的数据乖乖听话的。准备好，我们要开始扒源码了！

第一幕：reactive 的基本概念回顾

在开始之前，先简单回顾一下 reactive 的作用。reactive 是 Vue 3 中实现响应式系统的核心函数之一，它接收一个普通 JavaScript 对象，然后返回一个响应式的 Proxy 对象。这个 Proxy 对象会拦截对原对象的读取和修改操作，并在数据发生变化时通知 Vue 的依赖追踪系统，从而触发视图的更新。

简单来说，就是把一个普通对象变成“带电”的，任何对它的操作都会引起Vue的注意。

第二幕：__v_isShallow：浅浅的爱

__v_isShallow 是一个布尔类型的标志位，用于指示 reactive 创建的 Proxy 对象是否是“浅层响应式”的。 什么是浅层响应式？ 想象一下，你有一个对象，里面嵌套了其他对象。如果 __v_isShallow 为 true，那么只有最外层这个对象是响应式的，而内部嵌套的对象仍然是普通的 JavaScript 对象，它们的改变不会触发视图更新。

我们来举个例子：

import { reactive } from 'vue';

const state = reactive({
  name: 'Alice',
  address: {
    city: 'Wonderland',
    street: 'Rabbit Hole'
  }
});

console.log(state.address.city); // Wonderland

state.address.city = 'Neverland'; // 修改嵌套对象

// 如果 address 是深层响应式，那么修改 city 会触发视图更新
// 但如果 address 是浅层响应式，则不会触发视图更新

那么，__v_isShallow 是怎么实现的呢？ 我们先来看一下 reactive 函数的大致实现（简化版）：

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

function reactive(target) {
  return createReactiveObject(
    target,
    false, // isReadonly
    mutableHandlers, // baseHandlers
  );
}

function shallowReactive(target) {
  return createReactiveObject(
    target,
    false, // isReadonly
    shallowReactiveHandlers, // baseHandlers
  );
}

function createReactiveObject(
  target,
  isReadonly,
  baseHandlers
) {
  if (!isObject(target)) {
    return target;
  }

  const existingProxy = reactiveMap.get(target);
  if (existingProxy) {
    return existingProxy;
  }

  const proxy = new Proxy(target, baseHandlers);
  reactiveMap.set(target, proxy);
  return proxy;
}

注意看 reactive 和 shallowReactive 函数。 reactive 使用 mutableHandlers，而 shallowReactive 使用 shallowReactiveHandlers。 这里的关键在于 baseHandlers，它决定了 Proxy 如何拦截对象的读取和修改操作。

我们再来看看 shallowReactiveHandlers 的大致实现：

import { mutableHandlers, readonlyHandlers, toReactive, toReadonly } from './baseHandlers'
import { extend, isObject } from '@vue/shared'

// 缓存
const shallowReactiveMap = new WeakMap()

export const shallowReactiveHandlers = extend(
  {},
  mutableHandlers,
  {
    get: /*#__PURE__*/ createGetter(true),
    set: /*#__PURE__*/ createSetter(true),
  }
)

function createGetter(isShallow = false, isReadonly = false) {
  return function get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver)

    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }

    if (isObject(res)) {
      return isShallow ? res : toReactive(res)
    }

    return res
  }
}

在 shallowReactiveHandlers 中，get 拦截器被重写了，关键的一行代码是：

if (isObject(res)) {
  return isShallow ? res : toReactive(res)
}

这里 isShallow 为 true，所以如果读取到的值是对象，直接返回，不会递归地将它变成响应式对象。 这就是 __v_isShallow 控制 Proxy 行为的关键所在。

现在，让我们来总结一下 __v_isShallow 的作用：

特性	__v_isShallow = false (deep reactive)	__v_isShallow = true (shallow reactive)
嵌套对象响应式	是	否
性能	较低 (递归转换)	较高 (只转换第一层)
适用场景	需要深层响应式的情况	只关心对象本身属性变化的情况

第三幕：__v_isReadonly：只可远观，不可亵玩

__v_isReadonly 是另一个布尔类型的标志位，用于指示 reactive 创建的 Proxy 对象是否是“只读”的。 如果 __v_isReadonly 为 true，那么尝试修改 Proxy 对象的任何属性都会导致一个警告，并且修改操作会被忽略。

举个例子：

import { readonly } from 'vue';

const state = readonly({
  name: 'Bob',
  age: 30
});

console.log(state.name); // Bob

state.name = 'Charlie'; // 尝试修改只读对象，会触发警告

console.log(state.name); // Bob (修改无效)

__v_isReadonly 的实现也藏在 baseHandlers 里面。 类似地，我们有 readonly 和 shallowReadonly 函数，分别对应深层只读和浅层只读。

function readonly(target) {
  return createReactiveObject(
    target,
    true, // isReadonly
    readonlyHandlers // baseHandlers
  );
}

function shallowReadonly(target) {
  return createReactiveObject(
    target,
    true, // isReadonly
    shallowReadonlyHandlers // baseHandlers
  );
}

关键在于 readonlyHandlers 和 shallowReadonlyHandlers。 我们来看一下 readonlyHandlers 的大致实现：

import { TrackOpTypes, TriggerOpTypes } from './operations'
import { createDep } from './dep'
import { isObject, isSymbol } from '@vue/shared'
import { reactive, readonly } from './reactive'
import { track, trigger } from './effect'
import { ReactiveFlags, toRaw, toReactive } from './reactive'

// 缓存
const readonlyMap = new WeakMap()

export const readonlyHandlers = {
  get: /*#__PURE__*/ createGetter(false, true),
  set(target, key) {
    if (__DEV__) {
      console.warn(
        `Set operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  },
  deleteProperty(target, key) {
    if (__DEV__) {
      console.warn(
        `Delete operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  },
}

注意到 readonlyHandlers 中的 set 和 deleteProperty 方法了吗？ 它们直接返回 true，并且在开发环境下会打印警告。 这就阻止了对只读对象的修改。

createGetter 也略有不同:

function createGetter(isShallow = false, isReadonly = false) {
  return function get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver)

    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }

    if (isObject(res)) {
      return isShallow ? res : (isReadonly ? readonly(res) : reactive(res))
    }

    return res
  }
}

如果 isReadonly 为 true，那么读取到的对象会被递归地转换为只读对象。 如果 isShallow 也为 true, 那么只有第一层是只读的。

现在，让我们来总结一下 __v_isReadonly 的作用：

特性	__v_isReadonly = false (mutable)	__v_isReadonly = true (readonly)
修改属性	允许	禁止 (警告)
嵌套对象只读	递归转换为只读	可以选择浅层只读或者递归只读
适用场景	需要修改数据的情况	数据只读的情况

第四幕：__v_isShallow 和 __v_isReadonly 的组合拳

__v_isShallow 和 __v_isReadonly 可以组合使用，产生四种不同的响应式对象：

	Mutable (非只读)	Readonly (只读)
Deep (深层)	reactive()	readonly()
Shallow (浅层)	shallowReactive()	shallowReadonly()

• reactive(): 深层响应式，允许修改。
• readonly(): 深层只读，禁止修改。
• shallowReactive(): 浅层响应式，允许修改，但嵌套对象不是响应式的。
• shallowReadonly(): 浅层只读，禁止修改，且嵌套对象不是只读的。

第五幕：源码中的实战应用

我们来看一些 Vue 源码中 __v_isShallow 和 __v_isReadonly 的实际应用。

• shallowRef: shallowRef 创建一个浅层的 ref 对象，它的 __v_isShallow 为 true。 这意味着只有 ref 对象的 .value 属性是响应式的，如果 .value 赋值为一个对象，那么这个对象本身不是响应式的。

import { shallowRef } from 'vue';

const count = shallowRef({ value: 0 });

// 改变 count.value 本身会触发更新
count.value = { value: 1 };

// 改变 count.value.value 不会触发更新
count.value.value = 2;

• toRaw: toRaw 函数用于获取响应式对象的原始对象。 它会递归地剥离 Proxy 对象，直到找到原始对象。 在剥离 Proxy 对象时，__v_isShallow 和 __v_isReadonly 标志位可以帮助 toRaw 快速判断是否需要继续剥离。

import { reactive, toRaw } from 'vue';

const state = reactive({ name: 'Alice' });
const rawState = toRaw(state);

console.log(rawState === state); // false
console.log(rawState.name); // Alice

第六幕：性能考量

使用 __v_isShallow 可以提高性能，特别是当处理大型嵌套对象时。 浅层响应式可以避免不必要的递归转换，从而减少内存消耗和计算量。

但是，需要根据实际情况选择合适的响应式方式。 如果需要深层响应式，那么必须使用 reactive 或 readonly。 如果只需要浅层响应式，那么可以使用 shallowReactive 或 shallowReadonly，或者 shallowRef。

第七幕：总结与展望

今天我们深入探讨了 Vue 3 源码中 reactive 对象的 __v_isShallow 和 __v_isReadonly 标志位，以及它们如何控制 Proxy 的行为。 这两个标志位是 Vue 3 响应式系统的关键组成部分，它们提供了灵活的响应式控制，可以根据不同的场景选择合适的响应式方式，从而提高性能和效率。

希望今天的讲解能够帮助大家更好地理解 Vue 3 的响应式系统。 在未来的节目中，我们将继续深入探索 Vue 3 源码，挖掘更多有趣的知识点。 感谢大家的收看！我们下期再见！