Vue setup 函数怎么接收 props 参数并在组合式逻辑中进行访问-Vue.js-PHP中文网

setup函数接收响应式只读props和context参数；需用torefs解构或defineprops宏保持响应性，禁止直接赋值，派生数据应使用computed。

vue setup 函数怎么接收 props 参数并在组合式逻辑中进行访问

在 Vue 3 的组合式 API 中，setup 函数通过第一个参数接收 props，它是一个响应式的只读对象（基于 Proxy），不能直接修改。你需要用解构 + toRefs 或直接访问属性的方式安全使用。

props 参数自动传入 setup

setup 函数默认接收两个参数：
- 第一个参数是 props（响应式、只读）
- 第二个参数是 context（含 emit、slots、attrs）

不需要手动传参，Vue 会自动注入。前提是组件已正确定义 props 选项：

export default {
  props: {
    title: String,
    count: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    // ✅ 正确：直接访问 props.title、props.count
    console.log(props.title)
    return {}
  }
}

安全解构 props（避免失去响应性）

直接解构 props 会导致丢失响应性（因为解构后是普通变量）。正确做法是用 toRefs：

Vue-router参考手册

Vue-router参考手册下载

下载

导入：import { toRefs } from 'vue'
将 props 转为响应式引用：const { title, count } = toRefs(props)
之后需通过 .value 访问值（如 title.value），但模板中可直接用 {{ title }}

示例：

setup(props) {
  const { title, count } = toRefs(props)
  console.log(title.value) // ✅ 响应式读取
  return { title, count } // 模板中可直接 {{ title }}
}

配合 defineProps 宏（推荐写法）

使用 defineProps 宏（需启用 script setup）更简洁且类型友好：

自动推导 props 类型（TS 友好）
无需显式声明 setup 函数
props 直接按名访问，保持响应性

示例（<script setup></script>）：

<script setup>
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  }
})
<p>// ✅ 直接使用 props.title、props.count（响应式）
console.log(props.title)<p>// ✅ 解构也安全（Vue 3.4+ 支持响应式解构）
const { title, count } = props // ⚠️ 注意：仅在 3.4+ 中支持，旧版仍需 toRefs
</script>