reactive和ref有什么区别

reactive和ref的定义

reactive 和 ref 是 Vue 3 中的两种响应式数据绑定方式，ref 适用于简单的响应式数据，而 reactive 则适用于复杂对象或数组的响应式数据。

数据类型不同

ref：将一个普通的 JavaScript 值包装成响应式的引用类型。可以理解为 ref 是对普通值的包装。

reactive：将一个普通的 JavaScript 对象（或数组）转换为响应式代理对象。可以理解为 reactive 是对对象（或数组）的包装。

访问方式不同

ref：使用 .value 属性来访问和修改值。

reactive：可以直接访问和修改对象或数组的属性或元素，而无需使用 .value。

更新触发方式不同

ref：通过 ref() 或 .value 的赋值来触发更新。

reactive：通过直接修改对象或数组的属性或元素来触发更新。

代码示例

import { ref, reactive } from 'vue';

// ref示例
const count = ref(0);
console.log(count.value); // 访问值
count.value += 1; // 修改值

// reactive示例
const state = reactive({
  name: 'Alice',
  age: 25,
});
console.log(state.name); // 访问属性
state.age += 1; // 修改属性