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++ // 直接修改属性