vue3之toRefs

• 把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个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,所以使得复杂类型也是响应式的