深入解析 Vue.js 中的 `ref` 和 `shallowRef`：响应式编程的核心与优化实践

在 Vue.js 的响应式系统中，ref 和 shallowRef 是两个核心 API，用于创建响应式数据。它们在 Vue 3 的 Composition API 中扮演着重要角色，帮助开发者以更灵活的方式管理状态。然而，ref 和 shallowRef 在实现和使用场景上有着显著差异。本文将深入探讨两者的定义、用法、区别以及优化实践，带你全面掌握 Vue 响应式系统的精髓！

什么是 ref？

ref 是 Vue 3 Composition API 中用于创建响应式引用的核心工具。它可以将一个基本类型（如字符串、数字）或对象包装成一个响应式对象，任何对其值的修改都会触发组件的重新渲染。

ref 的核心用法

1. 创建响应式基本类型
   ref 可以包装基本类型数据（如 number、string），使其具备响应式能力。访问或修改 ref 的值需要通过 .value 属性。

   import { ref } from 'vue';
   
   export default {
     setup() {
       const count = ref(0);
   
       const increment = () => {
         count.value++; // 修改值，触发重新渲染
         console.log(count.value); // 输出当前值
       };
   
       return { count, increment };
     },
   };
   

   模板中使用：

   <div>
     <p>计数: {{ count }}</p>
     <button @click="increment">增加</button>
   </div>
   

2. 创建响应式对象
   ref 也可以包装复杂对象（如对象或数组），Vue 会通过 reactive 内部机制将其转换为深层响应式对象。

   import { ref } from 'vue';
   
   export default {
     setup() {
       const user = ref({ name: '张三', age: 25 });
   
       const updateName = () => {
         user.value.name = '李四'; // 修改对象属性，触发渲染
       };
   
       return { user, updateName };
     },
   };
   

   模板中使用：

   <div>
     <p>姓名: {{ user.name }}</p>
     <button @click="updateName">更改姓名</button>
   </div>
   

3. 注意事项

   • .value 的使用：在 JavaScript 中，访问或修改 ref 的值需要显式使用 .value，但在模板中，Vue 会自动解包 .value。
   • 深层响应式：ref 会递归地将对象的每一层都转换为响应式，这对复杂对象可能带来性能开销。
   • 类型安全：在 TypeScript 中，可以为 ref 指定类型，例如 Ref<number> 或 Ref<{ name: string, age: number }>。

什么是 shallowRef？

shallowRef 是 ref 的“浅层”版本，仅对 .value 的直接赋值操作具有响应式特性，而不会递归地将对象内部的属性转换为响应式。这使得 shallowRef 在处理大型复杂对象时更高效，适合性能敏感的场景。

shallowRef 的核心用法

1. 基本类型与 ref 相同
   对于基本类型，shallowRef 和 ref 的行为一致，因为基本类型没有嵌套结构。

   import { shallowRef } from 'vue';
   
   export default {
     setup() {
       const count = shallowRef(0);
   
       const increment = () => {
         count.value++; // 修改值，触发渲染
       };
   
       return { count, increment };
     },
   };
   

2. 浅层响应式对象
   For objects, shallowRef only makes the .value replacement reactive; changes to internal object properties do not trigger re-renders.

   import { shallowRef } from 'vue';
   
   export default {
     setup() {
       const user = shallowRef({ name: '张三', age: 25 });
   
       const updateName = () => {
         user.value.name = '李四'; // 不会触发渲染
         console.log(user.value.name); // 输出 "李四"
       };
   
       const replaceUser = () => {
         user.value = { name: '王五', age: 30 }; // 替换整个对象，触发渲染
       };
   
       return { user, updateName, replaceUser };
     },
   };
   

   模板中使用：

   <div>
     <p>姓名: {{ user.name }}</p>
     <button @click="updateName">更改姓名</button>
     <button @click="replaceUser">替换用户</button>
   </div>
   

3. 触发响应式更新
   如果需要让 shallowRef 的对象内部属性也具备响应式能力，可以结合 triggerRef 手动触发更新。

   import { shallowRef, triggerRef } from 'vue';
   
   export default {
     setup() {
       const user = shallowRef({ name: '张三', age: 25 });
   
       const updateName = () => {
         user.value.name = '李四';
         triggerRef(user); // 手动触发更新
       };
   
       return { user, updateName };
     },
   };
   

shallowRef 的注意事项

• 性能优化：shallowRef 避免了深层响应式转换，适合处理大型数据结构（如复杂的 JSON 对象或大型数组）。
• 受限的响应式：对象内部属性的修改不会自动触发渲染，需谨慎使用。
• 与 reactive 的关系：shallowRef 类似于 shallowReactive，但前者仅对 .value 赋值响应，后者对顶层属性的修改也响应。

ref vs. shallowRef：如何选择？

选择建议

• 使用 ref：当数据结构简单或需要所有层级的变化都触发视图更新时，ref 是默认选择。例如，表单输入、计数器等场景。
• 使用 shallowRef：当处理大型对象（如 API 返回的复杂 JSON 数据）或只需要顶层变化触发渲染时，shallowRef 能显著提升性能。例如，表格数据或树形结构。
• 结合使用：在复杂场景中，可以结合 ref 和 shallowRef，用 shallowRef 管理大对象，用 ref 管理需要频繁更新的子属性。

最佳实践与优化技巧

1. 性能优化

   • 对大型数据结构（如嵌套对象或数组），优先使用 shallowRef 减少响应式开销。
   • 如果需要部分属性响应式，可结合 reactive 或 ref 单独包装关键属性。

   import { shallowRef, ref } from 'vue';
   
   export default {
     setup() {
       const data = shallowRef({ list: [], total: 0 });
       const selectedIndex = ref(0); // 单独响应式
   
       const updateList = () => {
         data.value = { list: [1, 2, 3], total: 3 }; // 触发渲染
       };
   
       return { data, selectedIndex, updateList };
     },
   };
   

2. TypeScript 支持
   为 ref 和 shallowRef 指定类型，提升代码健壮性。

   import { ref, shallowRef } from 'vue';
   
   interface User {
     name: string;
     age: number;
   }
   
   const user = ref<User>({ name: '张三', age: 25 });
   const shallowUser = shallowRef<User>({ name: '李四', age: 30 });
   

3. 调试技巧

   • 使用 Vue Devtools 检查 ref 和 shallowRef 的响应式状态。
   • 如果视图未更新，检查是否错误使用了 shallowRef 或忘记调用 triggerRef。

总结

ref 和 shallowRef 是 Vue 3 响应式系统的基石，分别适用于不同的场景。ref 提供了深层响应式，适合大多数常规场景；shallowRef 则通过浅层响应式优化了性能，适合处理复杂数据结构。理解两者的差异并根据项目需求选择合适的工具，能让你的 Vue 应用更高效、更易维护。

在实际开发中，建议从 ref 开始，遇到性能瓶颈时再考虑 shallowRef，并结合 triggerRef 或其他 API 实现精细控制。希望这篇文章能帮助你更自信地驾驭 Vue 的响应式编程！

点个收藏，关注前端结城，一起用代码点亮前端世界！🚀