vue3中reactive和ref函数及对比

在Vue 3中，reactive和ref都是用于创建响应式数据的方法。

ref函数接收一个参数，返回一个包装过的响应式对象。它可以将基本类型数据（如数字、字符串等）转换为响应式对象，以及将对象字面量转换为响应式对象。

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 输出：0

count.value++
console.log(count.value) // 输出：1

reactive函数接收一个参数，返回一个响应式代理对象。它可以将普通对象转换为响应式对象，并且可以对对象的所有属性进行响应式处理。

import { reactive } from 'vue'

const state = reactive({ count: 0 })
console.log(state.count) // 输出：0

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

在使用上的区别：

• ref返回的是一个具有value属性的对象，需要通过.value来访问和修改值。而reactive返回的是一个普通对象，可以直接访问和修改对象的属性。
• ref适合用于包装基本类型数据和对象字面量，而reactive适合用于包装普通对象。
• reactive可以对对象的所有属性进行响应式处理，而ref只能对自身的值进行响应式处理。

在使用上的选择：

• 如果需要包装基本类型数据或对象字面量，或者只需要包装一个简单的值，可以使用ref。
• 如果需要包装一个普通对象，或者需要对对象的属性进行响应式处理，可以使用reactive。