啊，正如你所说模板需要响应式数据，可toRefs会将响应式对象转化为普通对象，那不是背道而驰了吗，为什么要这样做，

根据你提供的引用内容，toRefs函数的作用是将响应式对象转化为普通对象，但是为什么要这样做呢？这是因为在某些情况下，我们需要将响应式对象的属性解构出来使用，但是直接解构会使得解构出来的属性失去响应式，因此我们需要使用toRefs函数将响应式对象的属性转化为普通对象的属性，但是这些属性仍然保持响应式。这样我们就可以在解构出来的属性上进行操作，而不会影响到原来的响应式对象。

下面是一个使用toRefs函数的例子：

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello World'
})

// 将响应式对象转化为普通对象
const stateRefs = toRefs(state)

// 解构出count属性
const { count } = stateRefs

// 对count属性进行操作
count.value++

console.log(state.count) // 输出：1