vue3之toRefs

最新推荐文章于 2025-04-20 12:04:00 发布

郑建零零发

最新推荐文章于 2025-04-20 12:04:00 发布

阅读量2.3k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_52421092/article/details/131064963

版权

在Vue中，通过reactive创建的响应式对象在使用展开运算符时会失去响应式特性，尤其是对于基本类型。但通过toRefs函数，可以将响应式对象的每个属性转换为ref，确保即使是展开后的属性也保持响应式。案例二展示了如何正确使用toRefs来保持对象的复杂类型如car的响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个ref,
reactive的响应式功能赋予给对象的，给对象结构或展开的时候，会让数据丢失响应式能力。
使用toRefs可以保证该对象展开的每一个属性都是响应式的

案例一

<script>
import { reactive, ref, toRefs } from 'vue'
export default {
    setup() {
        const state = reactive({
            money: 100,
            car: {
                brand: "宝马",
                price: 100000,
            },
            name: '郑建'
        })
    }
    return {
        ...state
    }
}
</script>

上面返回的使用使用...state, 使用了展开运算符展开state, 使得基本类型money、name属性失去了响应式，而car是一个对象，所以没有影响还是响应式的。

案例二

下面解决案例一的问题

<script>
import { reactive, ref, toRefs } from 'vue'
export default {
    setup() {
        const state = reactive({
            money: 100,
            car: {
                brand: "宝马",
                price: 100000,
            },
            name: '郑建'
        })
    }
    return {
        ...toRefs(state)
    }
}
</script>

总结：把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个ref, ref可以使基本类型变成响应式的，可以把复杂类型自动传为reactive,所以使得复杂类型也是响应式的