前端Vue篇之vue3 ref 能处理对象了？

### Vue 3 中 `ref`、`isRef`、`toRefs` 和 `shallowReactive` 的功能及用法 #### 1. `ref` `ref` 是 Vue 3 提供的一个核心 API，用于创建一个响应式的引用对象。这个对象内部会自动追踪其值的变化并通知视图更新。 - **语法**: ```javascript import { ref } from 'vue'; const count = ref(0); console.log(count.value); // 访问值时需通过 `.value` count.value++; // 修改值也需要通过 `.value` ``` - **特点**: - 可以包装基本数据类型（如字符串、数字等），也可以包装复杂数据结构。 - 需要通过 `.value` 来访问或修改它的值[^1]。 --- #### 2. `isRef` `isRef` 是用来检测某个变量是否是一个由 `ref()` 创建的响应式引用对象。 - **语法**: ```javascript import { ref, isRef } from 'vue'; const myRef = ref(42); console.log(isRef(myRef)); // true console.log(isRef(42)); // false ``` - **用途**: - 帮助开发者判断当前处理的对象是否是由 `ref` 构建而成，从而决定如何操作该对象。 --- #### 3. `toRefs` `toRefs` 将一个响应式对象转换为普通对象，其中每个属性都是指向原始对象相应属性的 `ref`。 - **语法**: ```javascript import { reactive, toRefs } from 'vue'; const state = reactive({ name: 'Alice', age: 25, }); const refsState = toRefs(state); refsState.name.value = 'Bob'; // 同样会影响原对象中的 name 属性 console.log(state.name); // 输出 Bob ``` - **优点**: - 当需要解构响应式对象时，可以保持每个属性的响应性[^2]。 --- #### 4. `shallowReactive` `shalogReactive` 是一种浅层响应式机制，只会在顶层对象上设置代理器，而不会递归地使嵌套对象也变成响应式。 - **语法**: ```javascript import { shallowReactive } from 'vue'; const nestedObject = { user: { name: 'Charlie', age: 30, }, }; const shallowObj = shallowReactive(nestedObject); // 浅层响应仅作用于顶层对象本身 shallowObj.user = { name: 'David', age: 35 }; // 这里会触发响应 console.log(shallowObj.user.age); // 输出 35 // 不会对深层对象进行监控 shallowObj.user.name = 'Eve'; // 此处不会触发响应 console.log(shallowObj.user.name); // 输出 Charlie (未改变)[^3] ``` - **适用场景**: - 如果不需要对深层次的数据变化做出反应，则可以选择使用 `shallowReactive` 节省性能开销。 --- ### 功能对比总结表 | 特性/API | 是否支持深拷贝 | 如何访问值 | 主要用途 | |------------------|--------------------|--------------------|----------------------------| | `ref` | 支持 | 通过 `.value` | 单独封装基础类型的响应式变量 | | `isRef` | N/A | 判断是否为 `ref` | 辨识变量是否来自 `ref` | | `toRefs` | 支持 | 自动映射到 `ref` | 解构响应式对象的同时保留响应能力 | | `shallowReactive` | 不完全支持 | 直接访问属性名 | 实现浅层次的响应式状态管理 | --- ### 示例代码综合演示 以下是结合上述四个特性的实际应用案例： ```javascript import { ref, isRef, toRefs, shallowReactive } from 'vue'; // 使用 ref 定义单个响应式变量 const counter = ref(0); if (isRef(counter)) { console.log('counter 是一个 ref:', counter.value); } // 使用 toRefs 处理响应式对象 const userInfo = reactive({ username: 'JohnDoe', score: 98 }); const userRefs = toRefs(userInfo); userRefs.score.value += 2; console.log(`新分数：${userInfo.score}`); // 使用 shallowReactive 设置浅层响应式对象 const deepData = { details: { title: 'Example' } }; const shallowData = shallowReactive(deepData); deepData.details.title = 'Updated Title'; // 不会触发响应 shallowData.details = {}; // 触发响应 ``` ---