toRef方法我们在之前的setup方法中对props的操作已经使用过了，其第一种使用场景用于为原响应式对象上的属性新建单个响应式ref，从而保持对其源对象属性的响应式连接。接收两个参数：原响应式对象和属性名，返回一个ref数据。例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用，其第二种使用场景是，接收两个参数：原普通对象和属性名，此时可以对单个属性添加响应式ref，但是这个响应式ref的改变不会更新界面，需要注意的是：
- 获取数据值的时候需要加.value。
- toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。
- 对于原始普通数据来说，新增加的单个ref改变，数据会更新，但是界面不会自动更新。
使用方法如实例代码所示。
<div id="app">
<component-b user="John" />
</div>
const componentB = {
template:'<div>{{statecount.count}}</div>',
setup(props) {
const state = Vue.reactive({
foo: 1,
bar: 2
})
const fooRef = Vue.toRef(state, 'foo')
fooRef.value++
console.log(state.foo) // 打印2会影响原始数据
state.foo++
console.log(fooRef.value) // 打印3会影响fooRef数据
const statecount = {// 普通数据
count: 0,
}
const stateRef = Vue.toRef(statecount,'count')
setTimeout(()=>{
stateRef.value = 1 // 界面不会更新
console.log(statecount.count) // 打印1 会影响原始数据
},1000)
return {
statecount,
}
}
}
Vue.createApp({
components: {
'component-b': componentB
}
}).mount("#app")toRef更多的使用场景是对象添加单个响应式属性，而toRefs则是对完整的响应式对象进行转换。
2. toRefs方法
toRefs方法将原响应式对象转换为普通对象，其中结果对象的每个属性都是指向原始对象相应 属性的ref，另外一个重要使用场景是可以将reactive方法返回的复杂响应式数据ES6解构，需要注意的是：
- 获取数据值的时候需要加.value。
- toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。
- toRefs只接受响应式对象参数，不可接收普通对象参数，否则会警告。
使用方法如实例代码所示。
<div id="app">
<component-b />
</div>
const componentB = {
template:'<div>{{max}},{{count}}</div>',
setup(props) {
let obj = {
count: 0,
max: 100
}
const statecount = Vue.reactive(obj)
const {count,max} = Vue.toRefs(statecount) // 方便解构
setTimeout(()=>{
statecount.max++
console.log(obj.max) // 打印101 会影响原始数据，同时界面更新
},1000)
return {
count,
max
}
}
}
Vue.createApp({
components: {
'component-b': componentB
}
}).mount("#app")目前用的最多的还是ref和reactive来创建响应式对象，使用toRefs来转换成可以方便使用的解构的对象。