vue 中 props 直接解构的话会数据丢失响应式

项目中，vue父子组件传参时，如果直接解构的话会丢失响应式

<script setup>const props = defineProps({count: Number});let { count } = props;count++;console.log(props.count) // 结果0，count并不会发生变化
<script>

---

想解构成响应式数据需要使用 toRefs 或 toRef

• toRefs：用于将一个响应式对象转换为一个普通对象，其中每个属性都是一个 ref 对象。这允许在解构时保持响应性。
• toRef：用于创建一个 ref 对象，引用响应式对象的某个属性。

• 当使用 reactive 创建一个响应式对象时，对象的属性是响应式的，但直接解构（如 const { name } = state）会使 name 变成普通值，失去响应性。
• toRefs 和 toRef 通过创建 ref 对象来包装属性，确保在解构后属性仍能响应式更新。

例子1

<script setup>import {toRef, toRefs} from 'vue';const props = defineProps({msg: String,count: Number});// _msg是响应式的，会随着props.msg改变const _msg = toRef(props,'msg');// msg，count也是响应式的，会随着props改变const { msg, count } = toRefs(props);
<script>

例子2

<script setup>
import { reactive, toRefs } from 'vue';// 创建一个响应式对象
const state = reactive({name: 'Alice',age: 30
});// 使用 toRefs 解构，保持响应性
const { name, age } = toRefs(state);
// 现在 name 和 age 都是 ref 对象，可以通过 .value 访问
console.log(name.value); // 输出: 'Alice'
// 修改原对象，name 和 age 会响应式更新
state.name = 'Bob';
console.log(name.value); // 输出: 'Bob'// 使用 toRef 解构单个属性
const nameRef = toRef(state, 'name');
// 现在 nameRef 是一个 ref 对象
console.log(nameRef.value); // 输出: 'Alice'
<script>

---

注意点

• 响应性保持：解构后的 ref 对象会同步更新原对象的值，反之亦然。
• 性能：toRefs 和 toRef 是轻量级操作，不会导致性能问题。
• 错误场景：避免直接解构响应式对象（如 const { name } = state），这会导致 name 失去响应性。
• 替代方案：在 Vue 3 中，也可以使用 ref 创建独立响应式变量，但 toRefs 和 toRef 更适合处理对象属性。