浅谈Vue中shallowRef和shallowReactive什么时候用

import { ref, reactive, shallowRef, shallowReactive, triggerRef } from 'vue';

// ref：修改嵌套属性会触发更新
const state1 = ref({ count: 0 });
state1.value.count = 1; // ✅ 触发更新

// shallowRef：修改嵌套属性不会触发更新
const state2 = shallowRef({ count: 0 });
state2.value.count = 1; // ❌ 不会触发更新
state2.value = { count: 1 }; // ✅ 触发更新（替换整个 .value）

// shallowReactive：顶层属性变化触发更新，嵌套不触发
const state3 = shallowReactive({ user: { name: '张三' }, count: 0 });
state3.count = 1; // ✅ 触发更新
state3.user.name = '李四'; // ❌ 不会触发更新

import { ref } from 'vue';

const tableData = ref([]);

const loadData = async () => {
  const res = await fetchTableData(); // 返回 5000 条数据
  tableData.value = res.data; // Vue 会对每一行做深层代理，页面卡顿 1-2 秒
};

import { shallowRef } from 'vue';

const tableData = shallowRef([]);

const loadData = async () => {
  const res = await fetchTableData(); // 5000 条数据
  tableData.value = res.data; // 只代理 .value 这一层，瞬间完成
};

import { reactive } from 'vue';

const editorState = reactive({
  doc: { /* 深度嵌套的文档结构 */ },
  selection: { /* 嵌套选择信息 */ }
});

// Vue 试图代理整个文档树，初始化就卡了

import { shallowReactive } from 'vue';

const editorState = shallowReactive({
  doc: null,
  selection: null,
  mode: 'edit'
});

// 只追踪 mode、doc、selection 这些顶层属性
// doc 内部变化由编辑器库自己管理
const changeMode = (newMode) => {
  editorState.mode = newMode; // ✅ 触发更新
};

import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartInstance = ref(null);

onMounted(() => {
  chartInstance.value = echarts.init(document.getElementById('chart'));
  // Vue 会深度代理 echarts 实例，可能导致性能问题或库内部行为异常
});

import { shallowRef, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartInstance = shallowRef(null);

onMounted(() => {
  chartInstance.value = echarts.init(document.getElementById('chart'));
  // Vue 不会代理 echarts 实例内部，安全且高效
});

const updateChart = () => {
  chartInstance.value?.setOption({ /* ... */ });
};

import { shallowRef } from 'vue';

const list = shallowRef([{ name: 'A' }, { name: 'B' }]);

// 修改嵌套属性——界面不会更新
list.value[0].name = 'C';

// 替换数组才行，但太浪费
list.value = [...list.value];

import { shallowRef, triggerRef } from 'vue';

const list = shallowRef([{ name: 'A' }, { name: 'B' }]);

// 修改嵌套属性后手动触发更新
list.value[0].name = 'C';
triggerRef(list); // ✅ 通知 Vue 重新渲染

import { ref } from 'vue';

const state = ref({
  config: { /* 大量静态配置 */ },
  data: []
});

// config 永远不会变，但 Vue 还是代理了它

import { ref, markRaw } from 'vue';

const staticConfig = markRaw({
  chartOptions: { /* 大量静态配置 */ },
  constants: { /* 常量 */ }
});

const state = ref({
  config: staticConfig, // 不会被代理
  data: [] // 正常响应式
});

数据需要响应式吗？
├─ 否 → markRaw 永久排除
└─ 是 → 数据量大吗？
         ├─ 小（< 100 个属性）→ ref / reactive
         └─ 大（表格 / 图表 / 编辑器）
              ├─ 只整体替换 → shallowRef
              ├─ 只改顶层属性 → shallowReactive
              └─ 偶尔改嵌套 → shallowRef + triggerRef

import { shallowRef, triggerRef, type Ref } from 'vue';

/**
 * 创建一个浅层响应式列表
 * 适合大数据表格：整体替换触发更新，局部修改手动触发
 */
export function useShallowList(initial = []) {
  const list = shallowRef([...initial]);

  const replace = (newList) => {
    list.value = newList; // 自动触发更新
  };

  const updateItem = (index, patch) => {
    if (list.value[index]) {
      Object.assign(list.value[index], patch);
      triggerRef(list); // 手动触发
    }
  };

  const remove = (index) => {
    list.value.splice(index, 1);
    triggerRef(list);
  };

  return { list, replace, updateItem, remove };
};

// 使用
const { list, replace, updateItem } = useShallowList();