Vue语法之ref reactive对比及使用场景

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

1、区别

1） ref既可以定义值类型数据，也可以定义引用类型（对象类型）数据，使用value 属性访问和修改值；

2）reactive只能定义引用类型数据，可以直接访问和修改对象或数组的属性或元素，而无需使用 value

2、使用原则

1） 若需要一个值类型的响应式数据，必须使用ref

2） 若需要一个响应式对象，层级不深，ref、reactive都可以

3） 若需要一个响应式对象，且层级较深，推荐使用`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; // 修改属性