setup 里的第一个参数 props 怎么解构？解决响应式丢失的避坑指南-Vue.js-PHP中文网

不能直接解构 props，因其为响应式 proxy，解构后丢失响应性；正确方式有三：① torefs 全量转换，② toref 按需提取，③配合 defineprops 使用 torefs 保障类型与响应性。

setup 里的第一个参数 props 怎么解构？解决响应式丢失的避坑指南

在 Vue 3 的 setup 函数中，第一个参数 props 是一个响应式对象（Proxy），**不能直接用 ES6 解构**，否则会丢失响应性 —— 这是新手最常踩的坑之一。

为什么不能直接解构 props？

props 是 Vue 创建的响应式代理对象，其响应性依赖于对原始对象属性的访问追踪。一旦解构（如 const { title, count } = props），得到的是普通变量，脱离了响应式系统，后续 props 更新时，这些变量不会自动更新。

智谱清言 - 免费全能的AI助手

智谱清言是一款基于 GLM 大模型的通用 AI 助手与 Agent 工具。

下载

正确解构响应式 props 的 3 种方式

✅ 推荐：使用 toRefs（适用于所有 props）
将整个 props 转为一组响应式引用，解构后仍保留响应性：

import { toRefs } from 'vue'

export default {
  props: ['title', 'count'],
  setup(props) {
    const { title, count } = toRefs(props) // ✅ 响应式解构
    // title.value 和 count.value 可读可写，且响应更新
    return { title, count }
  }
}

✅ 按需提取：用 toRef（只取个别字段）
当只需响应式地使用某几个 prop 时更轻量：

import { toRef } from 'vue'

setup(props) {
  const title = toRef(props, 'title') // ✅ 单个响应式 ref
  const count = toRef(props, 'count')
  return { title, count }
}

⚠️ 注意：避免在 setup 中直接解构 + 使用 ref 包裹（常见误区）
以下写法看似“修复”，实则无效：

// ❌ 错误：ref 包裹的是初始值，不随 props 更新
const { title } = props
const titleRef = ref(title) // titleRef.value 不会响应 props.title 的变化

配合 `defineProps` 的现代写法（推荐组合）

使用 defineProps 宏时，toRefs 依然适用，且类型推导更友好：

<script setup lang="ts">
import { toRefs } from 'vue'

interface Props {
  title: string
  count: number
}

const props = defineProps<Props>()
const { title, count } = toRefs(props) // ✅ 类型安全 + 响应式

// 模板中可直接用 {{ title }}，无需 .value（模板中自动解包）
</script>