Vue3中 ref 与 reactive区别

lryh_2025-03-15 9:39

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