Vue3 响应式数据处理：ref 与 reactive 的功能和区别

ref 和 reactive 都是 Vue3 中的响应式数据处理工具，但它们的功能和使用方式有所不同。

'ref' 的功能是将一个普通的 JavaScript 数据转换成响应式数据，通过 'ref' 函数创建的响应式数据具有 'value' 属性，可以通过该属性进行读写操作。'ref' 函数的使用方式如下：

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0
count.value++ // 1

'reactive' 的功能是将一个对象转换成响应式对象，通过 'reactive' 函数创建的响应式对象可以通过属性访问符 (.) 进行读写操作。'reactive' 函数的使用方式如下：

import { reactive } from 'vue'

const state = reactive({
  count: 0
})
console.log(state.count) // 0
state.count++ // 1

总的来说，'ref' 适用于处理基本类型数据，而 'reactive' 适用于处理复杂对象。在实际开发中，可以根据具体情况选择使用不同的响应式数据处理工具。