Vue 3响应性系统中的`isShallow`与`isReadonly`状态的底层标记与查询 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 3响应性系统：`isShallow`与`isReadonly`的底层标记与查询

大家好，今天我们来深入探讨Vue 3响应性系统中的两个重要概念：isShallow和isReadonly。理解它们背后的底层标记以及查询机制，对于构建高效、可维护的Vue应用至关重要。

1. 响应性基础回顾

在深入isShallow和isReadonly之前，我们先简单回顾一下Vue 3响应性系统的核心。Vue 3利用Proxy对象拦截对数据的读取和修改操作，从而实现自动更新视图的效果。reactive、readonly等API用于创建不同类型的响应式对象。

reactive: 创建深度响应式对象。对象及其所有嵌套属性都会被追踪，任何修改都会触发更新。
readonly: 创建只读的响应式对象。对象及其所有嵌套属性都不能被修改，尝试修改会触发警告。

2. isShallow：浅响应性的标记

isShallow指示一个对象是否是“浅响应式”的。这意味着只有对象的第一层属性是响应式的，而嵌套的属性则不是。这在某些情况下可以提高性能，避免不必要的依赖追踪。

2.1 底层标记：ReactiveFlags.IS_SHALLOW

Vue 3使用ReactiveFlags枚举来标记不同类型的响应式对象。ReactiveFlags.IS_SHALLOW就是用于标记浅响应式对象的标志。

// packages/reactivity/src/reactive.ts

export const enum ReactiveFlags {
  SKIP = '__v_skip',
  IS_REACTIVE = '__v_isReactive',
  IS_READONLY = '__v_isReadonly',
  IS_SHALLOW = '__v_isShallow',
  RAW = '__v_raw'
}

当我们使用shallowReactive API创建一个浅响应式对象时，Vue会在该对象上设置__v_isShallow属性为true。

// packages/reactivity/src/reactive.ts

export function shallowReactive<T extends object>(target: T): T {
  return createReactiveObject(
    target,
    false, // isReadonly
    true,  // isShallow
    shallowReactiveHandlers,
    shallowCollectionHandlers
  )
}

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  isShallow: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any> | null
) {
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // target is already a ReactiveProxy
  // if target is already observed, return the existing proxy:
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // only specific value types can be observed.
  if (!canObserve(target)) {
    return target
  }
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // only a shallow reactive proxy can be created if the target is known to be
  // immutable.
  if (isShallow && isKnownImmutable(target)) {
    return target
  }
  const proxy = new Proxy(
    target,
    collectionTypes.has(target.constructor) ? collectionHandlers! : baseHandlers
  )
  proxyMap.set(target, proxy)
  weakMap.set(target, proxy)
  return proxy
}

2.2 查询：isShallow API

Vue 3提供了一个isShallow API，用于检测一个对象是否是浅响应式的。它通过检查对象上是否存在__v_isShallow属性，并且该属性是否为true来实现。

// packages/reactivity/src/reactive.ts

export function isShallow(value: any): boolean {
  return !!(value && value[ReactiveFlags.IS_SHALLOW])
}

2.3 示例

import { shallowReactive, isShallow } from 'vue';

const state = shallowReactive({
  name: 'Alice',
  address: {
    city: 'New York',
    zip: '10001'
  }
});

console.log(isShallow(state)); // true
console.log(isShallow(state.address)); // false (state.address 仍然是普通对象)

state.name = 'Bob'; // 会触发视图更新
state.address.city = 'Los Angeles'; // 不会触发视图更新

3. isReadonly：只读性的标记

isReadonly指示一个对象是否是只读的。这意味着对象及其所有嵌套属性都不能被修改。

3.1 底层标记：ReactiveFlags.IS_READONLY

与isShallow类似，Vue 3使用ReactiveFlags.IS_READONLY来标记只读对象。

// packages/reactivity/src/reactive.ts

export const enum ReactiveFlags {
  SKIP = '__v_skip',
  IS_REACTIVE = '__v_isReactive',
  IS_READONLY = '__v_isReadonly',
  IS_SHALLOW = '__v_isShallow',
  RAW = '__v_raw'
}

当我们使用readonly API创建一个只读对象时，Vue会在该对象上设置__v_isReadonly属性为true。

// packages/reactivity/src/reactive.ts

export function readonly<T extends object>(
  target: T
): Readonly<T> {
  return createReactiveObject(
    target,
    true,  // isReadonly
    false, // isShallow
    readonlyHandlers,
    readonlyCollectionHandlers
  )
}

3.2 查询：isReadonly API

Vue 3提供了一个isReadonly API，用于检测一个对象是否是只读的。它通过检查对象上是否存在__v_isReadonly属性，并且该属性是否为true来实现。

// packages/reactivity/src/reactive.ts

export function isReadonly(value: any): boolean {
  return !!(value && value[ReactiveFlags.IS_READONLY])
}

3.3 示例

import { reactive, readonly, isReadonly } from 'vue';

const original = reactive({
  name: 'Alice',
  address: {
    city: 'New York',
    zip: '10001'
  }
});

const readOnlyState = readonly(original);

console.log(isReadonly(original)); // false
console.log(isReadonly(readOnlyState)); // true
console.log(isReadonly(readOnlyState.address)); // true (deeply readonly)

// readOnlyState.name = 'Bob'; // 会触发警告
// readOnlyState.address.city = 'Los Angeles'; // 会触发警告

4. 组合使用：shallowReadonly

Vue 3还提供了一个shallowReadonly API，它结合了isShallow和isReadonly的特性。它创建的只读对象只有第一层属性是只读的，而嵌套的属性仍然是可修改的。

// packages/reactivity/src/reactive.ts

export function shallowReadonly<T extends object>(
  target: T
): Readonly<T> {
  return createReactiveObject(
    target,
    true,  // isReadonly
    true,  // isShallow
    shallowReadonlyHandlers,
    shallowCollectionHandlers
  )
}

4.1 示例

import { shallowReadonly, isReadonly } from 'vue';

const state = shallowReadonly({
  name: 'Alice',
  address: {
    city: 'New York',
    zip: '10001'
  }
});

console.log(isReadonly(state)); // true
console.log(isReadonly(state.address)); // false (state.address 仍然是普通对象)

// state.name = 'Bob'; // 会触发警告
state.address.city = 'Los Angeles'; // 可以修改，不会触发警告

5. 底层实现细节：Proxy Handler

无论是reactive、readonly还是它们的变体，底层都是通过Proxy对象实现的。Proxy对象允许我们拦截对目标对象的各种操作，例如读取属性、设置属性等。不同的响应式API使用不同的ProxyHandler来定义拦截行为。

reactiveHandlers / shallowReactiveHandlers: 用于reactive和shallowReactive，拦截读取和设置操作，并触发依赖追踪和更新。
readonlyHandlers / shallowReadonlyHandlers: 用于readonly和shallowReadonly，拦截读取操作，并在尝试设置属性时触发警告。

这些Handler内部会检查isReadonly和isShallow标志，以确定如何处理不同的操作。例如，readonlyHandlers会在set trap中检查isReadonly标志，如果为true，则发出警告。

// packages/reactivity/src/baseHandlers.ts

const readonlyHandlers: ProxyHandler<object> = {
  get: readonlyGet,
  set(target, key, value, receiver) {
    if (__DEV__) {
      if (isReactive(target)) {
        console.warn(
          `Set operation on key "${String(key)} failed: target is readonly.`,
          target
        )
      } else {
        console.warn(
          `Set operation on key "${String(key)} failed: target is readonly. ` +
            `Note that readonly values are primitive values or Readonly<T> types.`,
          target
        )
      }
    }
    return true
  },
  deleteProperty(target, key) {
    if (__DEV__) {
      console.warn(
        `Delete operation on key "${String(key)} failed: target is readonly.`,
        target
      )
    }
    return true
  },
  ...
}

6. 性能考量和使用场景

shallowReactive: 适用于只需要对顶层属性进行响应式追踪的场景，例如大型数据的展示，只需要响应顶层数据的变化，而不需要追踪深层数据的变化。可以减少依赖追踪的数量，提高性能。
readonly: 适用于需要保护数据不被意外修改的场景，例如从后端获取的数据，或者在组件之间传递的只读状态。
shallowReadonly: 适用于只需要对顶层属性进行只读保护，而允许修改深层属性的场景。

| API | 深度响应性 | 只读性 | 适用场景
7. 总结

isShallow和isReadonly是Vue 3响应性系统中重要的标记，它们用于区分不同类型的响应式对象。理解这些标记以及相关的API，可以帮助我们更好地控制响应性行为，优化性能，并提高代码的可维护性。通过Proxy Handler实现对数据操作的拦截，从而实现响应式和只读的特性。

更多IT精英技术系列讲座，到智猿学院

Vue 3响应性系统：isShallow与isReadonly的底层标记与查询

发表回复 取消回复

Vue 3响应性系统：`isShallow`与`isReadonly`的底层标记与查询

发表回复取消回复