Skip to content

definePropsRefs

稳定性: 稳定

defineProps 中将返回 refs 而不是 reactive 对象,可以在不丢失响应式的情况下解构 props。

toRefs(defineProps()) => definePropsRefs()

特性支持
Vue 3
Nuxt 3
Vue 2
TypeScript / Volar Plugin

基本用法

vue
<script setup lang="ts">
// ✅ 解构不丢失响应式
const { foo, bar } = definePropsRefs<{
  foo: string
  bar: number
}>()
//          ⬇️ Ref<string>
console.log(foo.value, bar.value)
</script>

默认值

vue
<script setup lang="ts">
import { withDefaults } from 'unplugin-vue-macros/macros' assert { type: 'macro' }

const { foo } = withDefaults(
  definePropsRefs<{
    foo?: string
  }>(),
  { foo: 'test' },
)
//          ⬇️ Ref<string>
console.log(foo.value)
</script>

Volar 配置

jsonc
// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3,
    "plugins": [
      "@vue-macros/volar/define-props-refs",
      // ...更多功能
    ],
  },
}