vue3中ref的两种写法

在 Vue3 中，可以使用两种方式来创建 ref：

1. 使用函数方式：可以通过 `import { ref } from 'vue'` 导入 `ref` 函数，然后通过 `ref()` 函数来创建 ref，如下所示：

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

count.value++

console.log(count.value) // 1

2. 使用对象方式：可以通过 `import { reactive } from 'vue'` 导入 `reactive` 函数，然后通过 `{ value: xxx }` 的形式来创建 ref，如下所示：

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

console.log(state.count) // 0

state.count++

console.log(state.count) // 1

需要注意的是，使用对象方式创建的 ref，我们需要通过 `state.count` 的方式来访问和修改 ref 的值，而不是 `state.value`。