Vue3中 ref 与 reactive区别

ref
        用途: ref 通常用于创建一个响应式的基本类型数据（如 string、number、boolean 等），但它也可以用于对象或数组     

        返回值: ref 返回一个带有 .value 属性的对象，访问或修改数据需要通过 .value 进行    

        使用场景: 适合处理单个值或需要明确访问 .value 的场景

import { ref } from 'vue';

const count = ref(0) // 创建一个响应式的数字
console.log(count.value) // 访问值
count.value++ // 修改值

reactive
        用途: reactive 用于创建一个响应式的对象或数组

        返回值: reactive 直接返回一个响应式代理对象，无需通过 .value 访问

        使用场景: 适合处理复杂对象或嵌套数据结构

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
})
console.log(state.count) // 直接访问属性
state.count++ // 直接修改属性