Question

toRef

用来为源对象上的某个 property 新创建一个 ref 。 ref 可以被传递，它会保持对其源 property 的响应式连接

<script setup lang="ts">
import { reactive, toRef } from 'vue'
  
/* 1.源对象为普通对象 */
const obj = {
   foo: 1,
   bar: 1
}
const state = toRef(obj, 'bar') // bar 转化为响应式对象
state.value++
console.log(obj, state); // {foo: 1, bar: 2} 2

/* 2.源对象为响应式对象 */
const state = reactive({
    foo: 1,
    bar: 1
})
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(fooRef.value) // 2
console.log(state.foo)    // 2
</script>

toRefs

不同于 toRef 的单个属性转换， toRefs 会把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。

toRefs 的作用是方便我们解构、扩展使用。并且其返回的对象，不会丢失响应性

<script setup>
import { reactive, toRefs } from 'vue'
  
const obj = reactive({
   foo: 1,
   bar: 1
})
let { foo, bar } = toRefs(obj) // 解构出来不丢失响应性
foo.value++
</script>

<template>
	<p>count: {{count}}</p>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    return {
      ...toRefs(state), // 解构出来不丢失响应性
    }
  }
}
</script>

toRaw

将响应式对象转化为普通对象

<script setup lang="ts">
import { reactive, toRaw } from 'vue'
 
const obj = reactive({
   foo: 1,
   bar: 1
})
 
const state = toRaw(obj) // 响应式对象转化为普通对象

</script>