在 Vue 3 项目里，从 `reactive` 对象上解构属性是很常见的写法，比如把 `user.name` 拆出来直接用在模板里。但很多人会踩到一个坑：解构之后的值不再随源对象变化而更新，视图就“卡”住了。这个问题通常出现在表单、配置面板、列表项编辑等场景，本质是 JavaScript 解构复制的是值，而不是引用，而 Vue 的响应式追踪依赖的是属性访问。`ref` 之所以能解决，是因为它把值包在一个带 `.value` 的对象里，解构出来的是这个对象本身，响应式链接没有断。这篇文章会从 Proxy 的依赖收集讲起，分析解构丢失响应式的具体过程，并给出 `toRef`、`toRefs`、计算属性等实际可用的处理方式。

## 一个最小复现

先看一段代码：

```vue
<script setup>
import { reactive } from 'vue'

const state = reactive({
 count: 0,
 user: {
 name: 'Alice'
 }
})

// 解构赋值
let { count } = state

function increment() {
 state.count++
 console.log('state.count:', state.count)
 console.log('count:', count)
}
</script>

<template>
 state.count: {{ state.count }}
 解构出的 count: {{ count }}
 <button @click="increment">+1</button>
</template>
```

点击按钮后，`state.count` 会从 0 变成 1，但模板里的 `count` 永远显示 0。因为 `let { count } = state` 执行时，`state.count` 是 0，这个 0 被赋给了局部变量 `count`。之后 `state.count++` 修改的是 Proxy 上的属性，局部变量 `count` 还是原来的 0，和响应式系统没有关系。

## reactive 的响应式到底依赖什么

Vue 3 用 `Proxy` 代理整个对象。当你访问 `state.count` 时，会触发 `get` 拦截器，Vue 在这里做依赖收集，把当前正在运行的副作用（比如组件的渲染函数）记录到 `count` 这个属性对应的依赖集合里。当你修改 `state.count` 时，触发 `set` 拦截器，通知依赖集合里的副作用重新执行。

关键点在于：依赖收集发生在属性访问的那一刻。`let { count } = state` 确实触发了 `state.count` 的 `get`，但收集到的依赖是“这次解构操作所在的副作用”，通常不是组件的渲染函数。而且解构完成后，局部变量 `count` 和 `state.count` 之间的连接就断了——后续读取局部变量不会再触发 `get`，后续修改 `state.count` 也不会通知局部变量。

## ref 为什么可以

`ref` 返回的是一个对象：

```js
const count = ref(0)
```

大致相当于：

```js
const count = {
 _value: 0,
 get value() {
 track()
 return this._value
 },
 set value(v) {
 this._value = v
 trigger()
 }
}
```

当你在模板里写 `{{ count }}`，Vue 会自动解包成 `count.value`，触发 `get value`，依赖被收集。修改时触发 `set value`，通知更新。

如果把 ref 解构出来：

```js
const state = reactive({ count: ref(0) })
const { count } = state // count 是 ref 对象本身
```

解构拿到的是 ref 对象引用，`count.value` 的 getter/setter 还在，响应式不会丢。模板里写 `{{ count }}` 依然能自动解包并追踪。

## toRef 和 toRefs 的实际用法

如果不想改变原对象结构，又想把 reactive 属性拆出来用，可以用 `toRef`：

```js
import { reactive, toRef } from 'vue'

const state = reactive({ count: 0 })
const count = toRef(state, 'count')

function increment() {
 count.value++
 // state.count 也会同步变化
}
```

`toRef` 返回一个只读或可写的 ref，它内部通过 getter/setter 代理到源对象的对应属性。读 `count.value` 就是读 `state.count`，写 `count.value` 就是写 `state.count`，响应式链路完整。

批量解构用 `toRefs`：

```js
import { reactive, toRefs } from 'vue'

const state = reactive({
 count: 0,
 name: 'Alice'
})

const { count, name } = toRefs(state)

count.value++
console.log(state.count) // 1
```

`toRefs` 会遍历对象所有可枚举属性，每个属性都转成 `toRef` 的结果。适合在组合式函数里返回响应式数据，让调用方可以安全解构。

## 组合式函数里的典型场景

写组合式函数时，直接返回 reactive 对象会让使用方很难解构：

```js
// 不推荐：使用方解构会丢响应式
export function useCounter() {
 const state = reactive({ count: 0 })
 const increment = () => state.count++
 return { state, increment }
}
```

使用方如果写 `const { state } = useCounter()` 没问题，因为 `state` 整体是 reactive 对象。但如果函数直接返回多个 reactive 属性：

```js
// 有问题
export function useUser() {
 const state = reactive({ name: '', age: 0 })
 return { ...state }
}
```

展开后每个属性都变成普通值。正确做法是返回 `toRefs`：

```js
import { reactive, toRefs } from 'vue'

export function useUser() {
 const state = reactive({ name: '', age: 0 })
 return toRefs(state)
}
```

调用方解构后拿到的每个字段都是 ref，在模板里自动解包，在 script 里用 `.value` 访问，两边都不会丢响应式。

## 计算属性能做但别滥用

有人用 `computed` 包一层来“保留”解构后的响应式：

```js
const state = reactive({ count: 0 })
const count = computed(() => state.count)
```

读 `count.value` 会重新计算 `state.count`，响应式确实在。但 `computed` 默认是只读的，想写回还得提供 getter/setter，而且它更适合派生状态，不是单纯为了解构。用 `toRef` 语义更直接，也不会引入额外的计算缓存逻辑。

## 什么时候解构安全

并不是所有解构都会出问题。如果解构的是普通常量，或者解构后不再关心更新，那就无所谓：

```js
const state = reactive({ apiUrl: '/api' })
const { apiUrl } = state // 这个值本来就不会变
```

真正要小心的是：解构出来的值后续会变化，并且需要驱动视图或副作用。判断标准很简单——这个字段会不会被重新赋值或修改？会，就别直接解构；不会，随便。

在模板里直接用 `state.count` 永远是最省心的，少一次解构就少一次踩坑的机会。需要拆出来时，记住 `toRef` 和 `toRefs` 这两个工具，它们就是为这个场景准备的。

 推荐查看天气：https://www.40tianqi.com/nanmulin/zuotian.html
 推荐查看天气：https://www.40tianqi.com/nanmulin/7tian.html
 推荐查看天气：https://www.40tianqi.com/nanmulin/10tian.html
 推荐查看天气：https://www.40tianqi.com/nanmulin/15tian.html
 推荐查看天气：https://www.40tianqi.com/nanmulin/40tian.html
 推荐查看天气：https://www.40tianqi.com/jiangzi/
 推荐查看天气：https://www.40tianqi.com/jiangzi/zuotian.html
 推荐查看天气：https://www.40tianqi.com/jiangzi/7tian.html
 推荐查看天气：https://www.40tianqi.com/jiangzi/10tian.html
 推荐查看天气：https://www.40tianqi.com/jiangzi/15tian.html
 推荐查看天气：https://www.40tianqi.com/jiangzi/40tian.html
 推荐查看天气：https://www.40tianqi.com/dingri/
 推荐查看天气：https://www.40tianqi.com/dingri/zuotian.html
 推荐查看天气：https://www.40tianqi.com/dingri/7tian.html
 推荐查看天气：https://www.40tianqi.com/dingri/10tian.html
 推荐查看天气：https://www.40tianqi.com/dingri/15tian.html
 推荐查看天气：https://www.40tianqi.com/dingri/40tian.html
 推荐查看天气：https://www.40tianqi.com/sajia/
 推荐查看天气：https://www.40tianqi.com/sajia/zuotian.html
 推荐查看天气：https://www.40tianqi.com/sajia/7tian.html
 推荐查看天气：https://www.40tianqi.com/sajia/10tian.html
 推荐查看天气：https://www.40tianqi.com/sajia/15tian.html
 推荐查看天气：https://www.40tianqi.com/sajia/40tian.html
 推荐查看天气：https://www.40tianqi.com/lazi/
 推荐查看天气：https://www.40tianqi.com/lazi/zuotian.html
 推荐查看天气：https://www.40tianqi.com/lazi/7tian.html
 推荐查看天气：https://www.40tianqi.com/lazi/10tian.html
 推荐查看天气：https://www.40tianqi.com/lazi/15tian.html
 推荐查看天气：https://www.40tianqi.com/lazi/40tian.html
 推荐查看天气：https://www.40tianqi.com/angren/
 推荐查看天气：https://www.40tianqi.com/angren/zuotian.html
 推荐查看天气：https://www.40tianqi.com/angren/7tian.html
 推荐查看天气：https://www.40tianqi.com/angren/10tian.html
 推荐查看天气：https://www.40tianqi.com/angren/15tian.html
 推荐查看天气：https://www.40tianqi.com/angren/40tian.html
 推荐查看天气：https://www.40tianqi.com/xietongmen/
 推荐查看天气：https://www.40tianqi.com/xietongmen/zuotian.html
 推荐查看天气：https://www.40tianqi.com/xietongmen/7tian.html
 推荐查看天气：https://www.40tianqi.com/xietongmen/10tian.html
 推荐查看天气：https://www.40tianqi.com/xietongmen/15tian.html
 推荐查看天气：https://www.40tianqi.com/xietongmen/40tian.html
 推荐查看天气：https://www.40tianqi.com/bailang/
 推荐查看天气：https://www.40tianqi.com/bailang/zuotian.html
 推荐查看天气：https://www.40tianqi.com/bailang/7tian.html
 推荐查看天气：https://www.40tianqi.com/bailang/10tian.html
 推荐查看天气：https://www.40tianqi.com/bailang/15tian.html
 推荐查看天气：https://www.40tianqi.com/bailang/40tian.html
 推荐查看天气：https://www.40tianqi.com/renbu/
 推荐查看天气：https://www.40tianqi.com/renbu/zuotian.html
 推荐查看天气：https://www.40tianqi.com/renbu/7tian.html
 推荐查看天气：https://www.40tianqi.com/renbu/10tian.html
 推荐查看天气：https://www.40tianqi.com/renbu/15tian.html
 推荐查看天气：https://www.40tianqi.com/renbu/40tian.html
 推荐查看天气：https://www.40tianqi.com/kangma/
 推荐查看天气：https://www.40tianqi.com/kangma/zuotian.html
 推荐查看天气：https://www.40tianqi.com/kangma/7tian.html
 推荐查看天气：https://www.40tianqi.com/kangma/10tian.html
 推荐查看天气：https://www.40tianqi.com/kangma/15tian.html
 推荐查看天气：https://www.40tianqi.com/kangma/40tian.html
 推荐查看天气：https://www.40tianqi.com/dingjie/
 推荐查看天气：https://www.40tianqi.com/dingjie/zuotian.html
 推荐查看天气：https://www.40tianqi.com/dingjie/7tian.html
 推荐查看天气：https://www.40tianqi.com/dingjie/10tian.html
 推荐查看天气：https://www.40tianqi.com/dingjie/15tian.html
 推荐查看天气：https://www.40tianqi.com/dingjie/40tian.html
 推荐查看天气：https://www.40tianqi.com/zhongba/
 推荐查看天气：https://www.40tianqi.com/zhongba/zuotian.html
 推荐查看天气：https://www.40tianqi.com/zhongba/7tian.html
 推荐查看天气：https://www.40tianqi.com/zhongba/10tian.html
 推荐查看天气：https://www.40tianqi.com/zhongba/15tian.html
 推荐查看天气：https://www.40tianqi.com/zhongba/40tian.html
 推荐查看天气：https://www.40tianqi.com/yadong/
 推荐查看天气：https://www.40tianqi.com/yadong/zuotian.html
 推荐查看天气：https://www.40tianqi.com/yadong/7tian.html
 推荐查看天气：https://www.40tianqi.com/yadong/10tian.html
 推荐查看天气：https://www.40tianqi.com/yadong/15tian.html
 推荐查看天气：https://www.40tianqi.com/yadong/40tian.html
 推荐查看天气：https://www.40tianqi.com/rikazejilong/
 推荐查看天气：https://www.40tianqi.com/rikazejilong/zuotian.html
 推荐查看天气：https://www.40tianqi.com/rikazejilong/7tian.html
 推荐查看天气：https://www.40tianqi.com/rikazejilong/10tian.html
 推荐查看天气：https://www.40tianqi.com/rikazejilong/15tian.html
 推荐查看天气：https://www.40tianqi.com/rikazejilong/40tian.html
 推荐查看天气：https://www.40tianqi.com/nielamu/
 推荐查看天气：https://www.40tianqi.com/nielamu/zuotian.html
 推荐查看天气：https://www.40tianqi.com/nielamu/7tian.html
 推荐查看天气：https://www.40tianqi.com/nielamu/10tian.html
 推荐查看天气：https://www.40tianqi.com/nielamu/15tian.html
 推荐查看天气：https://www.40tianqi.com/nielamu/40tian.html
 推荐查看天气：https://www.40tianqi.com/saga/
 推荐查看天气：https://www.40tianqi.com/saga/zuotian.html
 推荐查看天气：https://www.40tianqi.com/saga/7tian.html
 推荐查看天气：https://www.40tianqi.com/saga/10tian.html
 推荐查看天气：https://www.40tianqi.com/saga/15tian.html
 推荐查看天气：https://www.40tianqi.com/saga/40tian.html
 推荐查看天气：https://www.40tianqi.com/gangba/
 推荐查看天气：https://www.40tianqi.com/gangba/zuotian.html
 推荐查看天气：https://www.40tianqi.com/gangba/7tian.html
 推荐查看天气：https://www.40tianqi.com/gangba/10tian.html
 推荐查看天气：https://www.40tianqi.com/gangba/15tian.html
 推荐查看天气：https://www.40tianqi.com/gangba/40tian.html
 推荐查看天气：https://www.40tianqi.com/naqu/
 推荐查看天气：https://www.40tianqi.com/naqu/zuotian.html
 推荐查看天气：https://www.40tianqi.com/naqu/7tian.html
 推荐查看天气：https://www.40tianqi.com/naqu/10tian.html
 推荐查看天气：https://www.40tianqi.com/naqu/15tian.html
 推荐查看天气：https://www.40tianqi.com/naqu/40tian.html
 推荐查看天气：https://www.40tianqi.com/jiali/
 推荐查看天气：https://www.40tianqi.com/jiali/zuotian.html
 推荐查看天气：https://www.40tianqi.com/jiali/7tian.html
 推荐查看天气：https://www.40tianqi.com/jiali/10tian.html
 推荐查看天气：https://www.40tianqi.com/jiali/15tian.html
 推荐查看天气：https://www.40tianqi.com/jiali/40tian.html
 推荐查看天气：https://www.40tianqi.com/biru/
 推荐查看天气：https://www.40tianqi.com/biru/zuotian.html
 推荐查看天气：https://www.40tianqi.com/biru/7tian.html
 推荐查看天气：https://www.40tianqi.com/biru/10tian.html
 推荐查看天气：https://www.40tianqi.com/biru/15tian.html
 推荐查看天气：https://www.40tianqi.com/biru/40tian.html
 推荐查看天气：https://www.40tianqi.com/nierong/
 推荐查看天气：https://www.40tianqi.com/nierong/zuotian.html
 推荐查看天气：https://www.40tianqi.com/nierong/7tian.html
 推荐查看天气：https://www.40tianqi.com/nierong/10tian.html
 推荐查看天气：https://www.40tianqi.com/nierong/15tian.html
 推荐查看天气：https://www.40tianqi.com/nierong/40tian.html
 推荐查看天气：https://www.40tianqi.com/anduo/
 推荐查看天气：https://www.40tianqi.com/anduo/zuotian.html
 推荐查看天气：https://www.40tianqi.com/anduo/7tian.html
 推荐查看天气：https://www.40tianqi.com/anduo/10tian.html
 推荐查看天气：https://www.40tianqi.com/anduo/15tian.html
 推荐查看天气：https://www.40tianqi.com/anduo/40tian.html
 推荐查看天气：https://www.40tianqi.com/shenzha/
 推荐查看天气：https://www.40tianqi.com/shenzha/zuotian.html
 推荐查看天气：https://www.40tianqi.com/shenzha/7tian.html
 推荐查看天气：https://www.40tianqi.com/shenzha/10tian.html
 推荐查看天气：https://www.40tianqi.com/shenzha/15tian.html
 推荐查看天气：https://www.40tianqi.com/shenzha/40tian.html
 推荐查看天气：https://www.40tianqi.com/suoxian/
 推荐查看天气：https://www.40tianqi.com/suoxian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/suoxian/7tian.html
 推荐查看天气：https://www.40tianqi.com/suoxian/10tian.html
 推荐查看天气：https://www.40tianqi.com/suoxian/15tian.html
 推荐查看天气：https://www.40tianqi.com/suoxian/40tian.html
 推荐查看天气：https://www.40tianqi.com/bange/
 推荐查看天气：https://www.40tianqi.com/bange/zuotian.html
 推荐查看天气：https://www.40tianqi.com/bange/7tian.html
 推荐查看天气：https://www.40tianqi.com/bange/10tian.html
 推荐查看天气：https://www.40tianqi.com/bange/15tian.html
 推荐查看天气：https://www.40tianqi.com/bange/40tian.html
 推荐查看天气：https://www.40tianqi.com/baqing/
 推荐查看天气：https://www.40tianqi.com/baqing/zuotian.html
 推荐查看天气：https://www.40tianqi.com/baqing/7tian.html
 推荐查看天气：https://www.40tianqi.com/baqing/10tian.html
 推荐查看天气：https://www.40tianqi.com/baqing/15tian.html
 推荐查看天气：https://www.40tianqi.com/baqing/40tian.html
 推荐查看天气：https://www.40tianqi.com/nima/
 推荐查看天气：https://www.40tianqi.com/nima/zuotian.html
 推荐查看天气：https://www.40tianqi.com/nima/7tian.html
 推荐查看天气：https://www.40tianqi.com/nima/10tian.html
 推荐查看天气：https://www.40tianqi.com/nima/15tian.html
 推荐查看天气：https://www.40tianqi.com/nima/40tian.html
 推荐查看天气：https://www.40tianqi.com/ali/
 推荐查看天气：https://www.40tianqi.com/ali/zuotian.html
 推荐查看天气：https://www.40tianqi.com/ali/7tian.html
 推荐查看天气：https://www.40tianqi.com/ali/10tian.html
 推荐查看天气：https://www.40tianqi.com/ali/15tian.html
 推荐查看天气：https://www.40tianqi.com/ali/40tian.html
 推荐查看天气：https://www.40tianqi.com/pulan/
 推荐查看天气：https://www.40tianqi.com/pulan/zuotian.html
 推荐查看天气：https://www.40tianqi.com/pulan/7tian.html
 推荐查看天气：https://www.40tianqi.com/pulan/10tian.html
 推荐查看天气：https://www.40tianqi.com/pulan/15tian.html
 推荐查看天气：https://www.40tianqi.com/pulan/40tian.html
 推荐查看天气：https://www.40tianqi.com/zhada/
 推荐查看天气：https://www.40tianqi.com/zhada/zuotian.html
 推荐查看天气：https://www.40tianqi.com/zhada/7tian.html
 推荐查看天气：https://www.40tianqi.com/zhada/10tian.html
 推荐查看天气：https://www.40tianqi.com/zhada/15tian.html
 推荐查看天气：https://www.40tianqi.com/zhada/40tian.html
 推荐查看天气：https://www.40tianqi.com/gaer/
 推荐查看天气：https://www.40tianqi.com/gaer/zuotian.html
 推荐查看天气：https://www.40tianqi.com/gaer/7tian.html
 推荐查看天气：https://www.40tianqi.com/gaer/10tian.html
 推荐查看天气：https://www.40tianqi.com/gaer/15tian.html
 推荐查看天气：https://www.40tianqi.com/gaer/40tian.html
 推荐查看天气：https://www.40tianqi.com/ritu/
 推荐查看天气：https://www.40tianqi.com/ritu/zuotian.html
 推荐查看天气：https://www.40tianqi.com/ritu/7tian.html
 推荐查看天气：https://www.40tianqi.com/ritu/10tian.html
 推荐查看天气：https://www.40tianqi.com/ritu/15tian.html
 推荐查看天气：https://www.40tianqi.com/ritu/40tian.html
 推荐查看天气：https://www.40tianqi.com/geji/
 推荐查看天气：https://www.40tianqi.com/geji/zuotian.html
 推荐查看天气：https://www.40tianqi.com/geji/7tian.html
 推荐查看天气：https://www.40tianqi.com/geji/10tian.html
 推荐查看天气：https://www.40tianqi.com/geji/15tian.html
 推荐查看天气：https://www.40tianqi.com/geji/40tian.html
 推荐查看天气：https://www.40tianqi.com/gaize/
 推荐查看天气：https://www.40tianqi.com/gaize/zuotian.html
 推荐查看天气：https://www.40tianqi.com/gaize/7tian.html

在 Vue 3 项目里，从 reactive 对象上解构属性是很常见的写法，比如把 user.name 拆出来直接用在模板里。但很多人会踩到一个坑：解构之后的值不再随源对象变化而更新，视图就“卡”住了。这个问题通常出现在表单、配置面板、列表项编辑等场景，本质是 JavaScript 解构复制的是值，而不是引用，而 Vue 的响应式追踪依赖的是属性访问。ref 之所以能解决，是因为它把值包在一个带 .value 的对象里，解构出来的是这个对象本身，响应式链接没有断。这篇文章会从 Proxy 的依赖收集讲起，分析解构丢失响应式的具体过程，并给出 toRef、toRefs、计算属性等实际可用的处理方式。

Vue 3 中 reactive 对象解构后丢失响应式，为什么 ref 能解决？

在 Vue 3 项目里，从 reactive 对象上解构属性是很常见的写法，比如把 user.name 拆出来直接用在模板里。但很多人会踩到一个坑：解构之后的值不再随源对象变化而更新，视图就“卡”住了。这个问题通常出现在表单、配置面板、列表项编辑等场景，本质是 JavaScript 解构复制的是值，而不是引用，而 Vue 的响应式追踪依赖的是属性访问。ref 之所以能解决，是因为它把值包在一个带

前端

Vue3中reactive对象解构丢失响应式的原理与解决方案。从Proxy依赖收集机制剖析解构失效原因，详解toRef、toRefs和computed的正确用法，并给出组合式函数中安全解构的实践建议。

代码解释

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vue 3 中 reactive 对象解构后丢失响应式，为什么 ref 能解决？-腾讯云开发者社区-腾讯云

Vue 3 中 reactive 对象解构后丢失响应式，为什么 ref 能解决？

Vue 3 中 reactive 对象解构后丢失响应式，为什么 ref 能解决？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐