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; // 修改属性