Vue3中使用Composition API时，为什么在setup函数中访问props需要通过参数传递而不是直接解构？

Vue3中使用Composition API时，为什么在setup函数中访问props需要通过参数传递而不是直接解构？

回答： 在Vue3的setup函数中，props是响应式的，如果直接对其进行解构，会丢失其响应性。因此必须通过参数接收并使用toRefs或toRef来保持响应式连接。

解析： 在setup(props, context)中，props是一个响应式对象（基于shallowReactive），其属性的读取和更新都会被Vue追踪。如果直接解构：

// ❌ 错误做法：破坏响应性
setup(props) {
  const { message } = props; // 解构后message不再是响应式
  console.log(message); // 初始值正常
  return { message };
}

当父组件更新message时，子组件中解构出的message不会更新。

正确做法是使用toRefs将每个prop转换为ref：

// ✅ 正确做法：保持响应性
import { toRefs } from 'vue';

setup(props) {
  const { message } = toRefs(props); // 转换为ref
  // 现在message是一个ref，需用.value访问，但在模板中自动解包
  console.log(message.value);
  return { message };
}

或者对于不需要响应性的静态值，可以安全解构：

const { staticValue } = props; // 如果这个prop不会改变

总结：为了保持props的响应性，涉及可能变化的prop时应使用toRefs()包装后再解构。这是Vue3 Composition API的重要细节，理解这一点有助于避免常见的响应性丢失问题。