definePropsRefs
Stability:
stable
Returns refs from defineProps
instead of a reactive object. It can be destructured without losing reactivity.
toRefs(defineProps())
=> definePropsRefs()
Features | Supported |
---|---|
Vue 3 | ✅ |
Nuxt 3 | ✅ |
Vue 2 | ✅ |
TypeScript / Volar Plugin | ✅ |
Basic Usage
vue
<script setup lang="ts">
// ✅ won't lose reactivity with destructuring
const { foo, bar } = definePropsRefs<{
foo: string
bar: number
}>()
// ⬇️ Ref<string>
console.log(foo.value, bar.value)
</script>
Volar Configuration
jsonc
// tsconfig.json
{
"vueCompilerOptions": {
"target": 3,
"plugins": [
"@vue-macros/volar/define-props-refs"
// ...more feature
]
}
}