【Vue】什么时候用Ref？什么时候用shallowRef？

音仔小瓜皮2026-04-15 11:38

1、Ref (深层响应式)

当你把一个对象给 ref 时，它会通过 reactive 递归地把对象里的每一个属性都变成"遥控器"++（响应的自动绑定）++。无论你改到哪一层，Vue 都能收到信号。

底层行为 ：.value 指向的是一个经过 Proxy 包装后的响应式代理对象。

2、ShallowRef (浅层响应式)

shallowRef 只盯着 .value 本身。它只在 .value****被 整体替换时才会触发更新。如果你修改内部的属性，它会视而不见。

底层行为 ：.value 指向的是原始对象本身，没有经过 Proxy 包装。

当你在用 fabricJS、tiptap editor等这种第三方库外部大对象的时候，⚠️++不要用ref去绑定++

✅应该用++shallowRef 或者直接用普通变量++

⚙️原因：

使用 ref 会让 Vue 3 对实例进行深层响应式代理。其中内部状态管理的属性和方法（EditorState、EditorView、事务分发）
会被 Proxy拦截，事务链路会被破坏，导致无法访问或者正确执行

3、triggerRef

是一个方法，触发shallowRef的局部更新

🌰使用场景

当你为了性能优化 使用 shallowRef 来保存大型数据结构（比如一个巨大的数组或地图对象），但偶尔又需要++局部修改它并更新界面++ 时，triggerRef 就派上用场了。

代码示例：

JavaScript

复制代码

import { shallowRef, triggerRef } from 'vue';

const userInfo = shallowRef({ name: '张三', age: 25 });

const updateName = () => {
  // 直接修改属性，视图不会更新
  userInfo.value.name = '李四'; 
  
  console.log(userInfo.value.name); // 打印 '李四'，但页面显示的还是 '张三'

  // 手动触发更新
  triggerRef(userInfo); 
};