阅读数:6 评论数:0

一、概述

在 Vue 3 中，shallowRef 是一种用于创建浅层响应式引用的 API。与 ref 不同，shallowRef 只会对其引用的值进行浅层监听，而不会递归地使对象的内部属性也成为响应式的。

二、使用场景

shallowRef 适用于以下场景：

• 当你希望对象的顶层属性是响应式的，但不希望对象的嵌套属性自动成为响应式。
• 当你需要优化性能，避免对大数据结构进行深层次的响应式转换。

三、基本用法

import { shallowRef } from 'vue';

const state = shallowRef({
  a: 1,
  nested: {
    b: 2
  }
});

// 顶层属性是响应式的
state.value.a = 2; // 会触发视图更新

// 嵌套属性不是响应式的
state.value.nested.b = 3; // 不会触发视图更新