Vue3响应式Props解构细节

解构基本类型与引用类型区别

在Vue3.5+中，props已经支持了响应式解构。不过，官方文档中还提到了将解构后的变量传递到函数中有一些细节：

当我们将解构的 prop 传递到函数中时，例如：

const { foo } = defineProps(['foo'])
 
watch(foo, /* ... */)

这并不会按预期工作，因为它等价于 watch(props.foo, ...)——我们给 watch 传递的是一个值而不是响应式数据源。实际上，Vue 的编译器会捕捉这种情况并发出警告。
与使用 watch(() => props.foo, ...) 来侦听普通 prop 类似，我们也可以通过将其包装在 getter 中来侦听解构的 prop：

watch(() => foo, /* ... */)

此外，当我们需要传递解构的 prop 到外部函数中并保持响应性时，这是推荐做法：

useComposable(() => foo)

外部函数可以调用 getter (或使用 toValue 进行规范化) 来追踪提供的 prop 变更。例如，在计算属性或侦听器的 getter 中。

其中提到了foo直接传递给函数会导致函数内部的值失去响应式，需要使用getter包裹。这里其实特指基本类型如string，经过实践发现，当声明一个object时，其属性可以正常传递给函数且不会失去响应式。这是因为object类型作响应式时，底层使用reactive进行了深层响应式代理，所以其内部的属性并不会失去响应式。

陷阱：勿声明props并赋值再解构

// 保持响应式
const { msg } = defineProps(["msg"]);
// 请勿这样写，会失去响应式
// const props = defineProps(["msg"]);
// const { msg } = props;
<template>
	{{msg}}
</template>