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