Vue3使用defineprops丢失响应式的解决方法

今天写代码的时候,父组件传给子组件的数据,然后修改数据去调取后端的接口,结果数据一直对不上,然后发现终端中打印的

点击进入发现尤大大发的文章[Core Team RFC] Reactive Props Destructure · vuejs/rfcs · Discussion #502 · GitHub

比如我们平时写代码父传子是这样的

const props = defineProps<{ id: string }>()

但是在别的地方写需要props.id来使用id传来的值,有些人觉得这样不太优雅,于是这样写

const { id } = defineProps<{ id: string }>()

这就是问题的所在,这样会使id丢失响应式

如果非要使用结构式,可以这样玩

const props = defineProps<{ id: string }>()
const { id } = toRef(props)

或者

<script setup>
import { watchEffect } from 'vue'

const { count } = defineProps(['count'])

watchEffect(() => {
  // referencing a destructured binding in tracking contexts
  // registers it as a dependency.
  // this will log every time the count prop changes from parent
  console.log(count)
})
</script>

<template>{{ foo }}</template>