举例详细分析 vue3里toRefs 与 reactive的区别

Vue 3 中的 toRefs 函数用于将响应式对象的属性转换为 ref 对象，以便在模板中进行解构或访问每个属性。而 reactive 函数仍然返回一个响应式对象，但是它可以让您更精细地控制对象的响应式性，例如可以自定义 setter 函数。

假设有一个响应式对象 user：

const user = reactive({
  name: 'John',
  age: 25
})

如果将其传递给 toRefs 函数：

const userRefs = toRefs(user)

则 userRefs 会返回一个包含每个属性的 ref 对象：

{
  name: { value: 'John' },
  age: { value: 25 }
}

在模板中，您可以使用解构对象属性来访问每个属性：

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const user = reactive({
      name: 'John',
      age: 25
    })
    return {
      user: toRefs(user)
    }
  }
})
</script>

这样可以确保每个属性都是响应式的，而不会影响整个对象的响应式性。

相反，如果没有使用 toRefs 函数，您需要使用 ref 函数将每个属性转换为 ref 对象：

const name = ref('John')
const age = ref(25)

const user = {
  name,
  age
}

这种情况下，您无法在模板中使用解构对象属性访问每个属性，而是需要使用 .value 属性来访问其值。

而同时也可以使用 reactive 函数，但需要注意的是，当对象属性发生变化时，不会触发模板重新渲染：

const user = reactive({
  name: 'John',
  age: 25
})

// 注意：当 name 改变时，模板不会重新渲染
user.name = 'Mike'

因此，您需要手动使用 computed 或 watch 等函数来监听属性变化并触发重新渲染。