Vue.js 使用 ToRefs 与 ToRef 实现响应式对象的结构解构-Vue.js-PHP中文网

torefs 和 toref 用于解决 vue 3 中解构响应式对象丢失响应性的问题：torefs 批量将 reactive 对象所有属性转为 ref，适合全量解构；toref 按需创建单个属性的 ref，适合部分提取或处理动态/可能不存在的属性，且对 readonly props 安全。

vue.js 使用 torefs 与 toref 实现响应式对象的结构解构

在 Vue 3 中，直接对响应式对象进行结构解构会丢失响应性，toRefs 和 toRef 就是用来解决这个问题的两个关键工具。

为什么解构会丢失响应性？

Vue 的响应式系统基于 Proxy 实现，响应性绑定在原始对象上。一旦用 const { count } = reactive({ count: 0 }) 解构，count 就变成一个普通变量（即“断开连接”的副本），后续修改不会触发视图更新。

toRefs：批量转换为响应式引用

适用于需要解构整个 reactive 对象的场景。它把对象中每个属性都转成 ref，保持响应性连接。

接收一个 reactive 对象，返回一个由 ref 组成的新对象
解构后的变量仍是 ref，需通过 .value 读写（模板中可省略）
常用于组合式 API 中向模板暴露多个响应式字段

示例：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

import { reactive, toRefs } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 25,
  job: 'Engineer'
})

const { name, age, job } = toRefs(state) // ✅ 保持响应性
name.value = 'Bob' // 视图自动更新

toRef：按需创建单个响应式引用

适用于只关心对象中某几个属性，或需要从 props、响应式对象中“提取”某个字段并保持响应性的场景。

接收 reactive 对象和属性名，返回该属性对应的 ref
即使属性当前不存在，也会创建一个响应式引用（值为 undefined）
修改 toRef 创建的 ref.value，会同步更新源对象对应属性

示例：

import { reactive, toRef } from 'vue'

const profile = reactive({ name: 'Tom', score: 95 })

const nameRef = toRef(profile, 'name')   // ✅ 响应式绑定
const scoreRef = toRef(profile, 'score')

nameRef.value = 'Jerry' // profile.name 同步更新