vue3 的ref 初始化对像

在 Vue 3 中，可以使用 `ref` 函数来创建一个响应式的数据引用。`ref` 函数可以接受任何 JavaScript 值作为其参数，包括对象、数组、函数等。如果传递给 `ref` 的参数是一个对象，那么会返回一个对象，该对象具有一个名为 `value` 的属性，该属性包含对传入的对象的引用，并且对该对象的更改将自动触发组件的重新渲染。

以下是一个使用 `ref` 创建响应式对象引用的示例：

import { ref } from 'vue'

export default {
  setup() {
    const person = ref({ name: 'John', age: 30 })

    function increaseAge() {
      person.value.age++
    }

    return {
      person,
      increaseAge
    }
  }
}

在上面的示例中，我们使用 `ref` 创建了一个名为 `person` 的响应式对象引用，并将其初始值设置为 `{ name: 'John', age: 30 }`。然后，我们将 `person` 对象返回给组件的模板，以便在模板中可以使用 `person.value` 来访问 `person` 引用的实际对象。我们还定义了一个 `increaseAge` 函数，用于增加 `person` 对象的 `age` 属性，当我们调用 `increaseAge` 函数时，`person` 对象的 `age` 属性将自动更新，并且组件将重新渲染以反映这些更改。

需要注意的是，如果想要访问对象的属性，需要使用 `.value` 属性来访问引用的实际对象。如果在模板中访问 `person.age`，会得到一个非响应式的值，因为 Vue 3 只会对 `person.value` 进行响应式处理。