当前位置：首页 > news >正文

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

news 2025/8/1 7:57:23

项目中，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>