高效的数据解构：用 toRefs 和 toRef 保持响应性

前言

在 Vue3 的开发中，解构赋值是比较常用的语法特性。它能让代码更简洁，变量命名更自由。但当解构遇到 reactive 响应式数据时，一个常见的陷阱就出现了：解构后的变量失去了响应性。

为什么会这样？如何既享受解构的便利，又保持数据的响应性？本文将深入探讨 toRefs 和 toRef 这两个 API 的工作原理和使用技巧，帮你彻底解决解构带来的响应式丢失问题。

解构的诱惑与陷阱

为什么我们喜欢解构赋值？

解构赋值是 ES6 带来的语法糖，它让代码变得更加简洁优雅：

javascript 复制代码

const user = reactive({ name: '张三', age: 18 })

// 没有解构之前，只能属性调用
console.log(user.name)
console.log(user.age)

// 有解构之后
const { name, age } = user
console.log(name)
console.log(age)

解构的优势

按需引入：只取需要的属性
命名自由：可以重命名变量
代码简洁：减少重复的前缀

解构带来的问题

当我们对 reactive 响应式对象进行解构时，会丢失响应式。

这部分的内容，在上一篇文章《响应式探秘：ref vs reactive，我该选谁？》中有详细讲解，本文不再赘述！

toRefs 的魔法

原理：将 reactive 对象的每个属性都转换为 ref

toRefs 的出现正是为了解决 reactive 的解构问题。它的工作原理是：遍历 reactive 对象的所有属性，为每个属性都单独创建一个 ref，这些 ref 会保持与原对象的响应式连接：

javascript 复制代码

// 简化的 toRefs 实现
function toRefs(obj) {
  const result = {}
  
  for (const key in obj) {
    // 为每个属性创建 ref
    result[key] = {
      __v_isRef: true,
      get value() {
        return obj[key]  // 读取时访问原对象
      },
      set value(newVal) {
        obj[key] = newVal // 设置时修改原对象
      }
    }
  }
  return result
}

// 使用
const user = reactive({
  name: '张三',
  age: 18
})

const refs = toRefs(user)

当 user 使用 toRefs 转换后，其结构是这样的：

javascript 复制代码

// toRefs转换后的结构
{
  name: RefImpl { ... },
  age: RefImpl { ... }
}

有了这个结构之后，我们就可以放心、安全地解构了：

javascript 复制代码

const { name, age } = refs
name.value = '李四' // 会触发 user.name 的更新
age.value++        // 会触发 user.age 的更新

使用场景：从组合式函数返回多个值时

toRefs 最常见的应用场景就是当组合式函数中返回多个响应式值时，进行处理：

javascript 复制代码

import { reactive, toRefs } from 'vue'

export function useUser() {
  const state = reactive({
    user: null,
    loading: false,
    error: null,
    permissions: []
  })

  async function fetchUser(id) {
    state.loading = true
    try {
      state.user = await api.getUser(id)
      state.permissions = await api.getPermissions(id)
      state.error = null
    } catch (e) {
      state.error = e
    } finally {
      state.loading = false
    }
  }

  function updateUser(data) {
    Object.assign(state.user, data)
  }

  // ✅ 返回时使用 toRefs，让使用者可以解构
  return {
    ...toRefs(state),
    fetchUser,
    updateUser
  }
}

注意事项：响应式连接是双向的

我们一定要注意：toRefs 创建的是响应式连接是双向的，它并不是复制了一份数据，而是指向原对象属性的引用。这也是一个很常见的开发误区。

javascript 复制代码

const original = reactive({
  name: '张三',
  age: 18
})

const { name, age } = toRefs(original)

// 修改 ref 会影响原对象
name.value = '李四'
console.log(original.name) // '李四'

// 修改原对象会影响 ref
original.age = 20
console.log(age.value) // 20

// 这种连接是持久的
original.name = '王五'
console.log(name.value) // '王五'

// 即使重新赋值原对象的属性，连接依然保持
original.name = '赵六'
console.log(name.value) // '赵六'

toRef 的精简用法

场景：只想处理 reactive 对象中的某一个属性

使用 toRefs 会把 reactive 对象中的所有属性都转换成 ref；但有时候我们只需要处理 reactive 对象中的某些属性，这时使用 toRef 会更加精准。toRef 是用于将 reactive 对象的指定的属性转成 ref，一次只能转换一个属性。在 toRefs 源码实现中，其本质就是通过遍历对象的属性，再通过 toRef 逐个转换。

javascript 复制代码

import { reactive, toRef } from 'vue'

const state = reactive({
  count: 0,
  name: '张三',
  age: 18,
  email: 'zhang@example.com',
  // ... 可能还有很多其他属性
})

// 只关心 count 属性
const countRef = toRef(state, 'count')

// 现在可以像使用 ref 一样使用 countRef
countRef.value++ // 修改 state.count
console.log(state.count) // 1

// 修改原对象也会影响 countRef
state.count = 10
console.log(countRef.value) // 10

优势：性能更好，只创建一个 ref

相比 toRefs 会为所有属性创建 ref，toRef 只创建需要属性的 ref，性能开销更小。

toRef 的另一个妙用：创建可选的响应式引用

toRef 还有个好处，可以用来处理可能不存在的属性：

javascript 复制代码

const state = reactive({
  user: {
    name: '张三'
  }
})

当前 user 只存在 name 属性，如果我们直接给它添加一个新属性会怎么样呢？

javascript 复制代码

state.user.profile.gender = '男'

上述代码毫无疑问会报错：Cannot set properties of undefined (setting 'gender')。但通过 toRef 我们可以安全赋值：

javascript 复制代码

// 即使 profile 不存在，也能创建响应式引用
const profile = toRef(state.user, 'profile')

// 可以安全地赋值
profile.value = { gender : '男' }

性能考量

toRefs 的性能开销

toRefs 会遍历对象的所有属性，为每个属性创建一个 ref 对象。对于大型对象来说，这确实会有一定的性能开销。性能开销主要来源于以下几点：

遍历开销：需要遍历所有属性
内存开销 ：每个 ref 都是一个对象，占用内存
响应式连接 ：每个 ref 都需要建立响应式连接

因此基于性能考虑，我们应该遵循按需使用的原则，只有在需要的时候才使用 toRefs 。

何时不该使用 toRefs

有些场景下，使用 toRefs 也确实可能不是最佳选择：

场景1：性能敏感的高频操作

这就是上述提到的性能开销问题。

场景2：对象在组件内部使用，不需要暴露给外部

javascript 复制代码

function internalFeature() {
  const internalState = reactive({ ... })
  
  // 不需要 toRefs，直接在内部使用 state
  function doSomething() {
    internalState.prop = value
  }
  
  return {
    doSomething
  }
}

场景3：返回整个对象

javascript 复制代码

function useConfig() {
  const config = reactive({
    theme: 'dark',
    language: 'zh',
    features: {...}
  })
  
  // 如果使用者很少需要解构，直接返回 reactive 更好
  return {
    config,
    updateConfig
  }
}

结语

toRefs 和 toRef 解决了在享受解构便利的同时，又不失去 Vue 响应式系统的强大能力。理解并善用它们，我们的代码将既简洁又可靠！

对于文章中错误的地方或有任何疑问，欢迎在评论区留言讨论！