2025-5-19Vue3快速上手

1、toRefs和toRef

当解构一个响应式对象（如 reactive 创建的对象）时，直接解构会失去响应性，此时可用 toRefs或toRef 保持响应性

toRef 的核心作用是将对象的属性转换为 ref，保持与原属性的双向绑定，无论原对象是否响应式。但只有当原对象本身是响应式的（如 reactive 创建的），修改才会触发视图更新。

• toRef：适用于需要将单个属性转为 ref 的场景（如解构响应式对象的单个属性）。
• toRefs：适用于批量处理对象的所有属性，生成包含多个 ref 的对象（如解构响应式对象的多个属性）。

常见误区澄清

1. toRef ≠ 响应式
   toRef 本身不创建响应式对象，它只是创建一个保持双向绑定的 ref。只有当原对象是响应式的（如 reactive 创建的），修改才会触发视图更新。

2. 双向绑定 ≠ 响应式更新
   双向绑定仅意味着数据同步，而响应式更新需要 Vue 的代理机制。例如：

   const plainObj = { count: 0 };
   const countRef = toRef(plainObj, 'count');countRef.value++; // 会更新 plainObj.count，但不会触发视图更新（因为 plainObj 不是响应式的）