Vue3中的ref与reactive：构建响应式数据的双刃剑

一、使用方式

1. ref的使用

import { ref } from 'vue';

// 创建一个响应式的计数器
const count = ref(0);

// 修改值
count.value++; // 增加计数

// 在模板中直接绑定

2. reactive的使用

import { reactive } from 'vue';

// 创建一个响应式对象
const user = reactive({
  name: 'Alice',
  age: 30,
});

// 修改对象属性
user.age++; // 增加年龄

// 在模板中使用

二、注意事项

1. 数据访问

• ref：由于.value的存在，直接在模板中使用ref定义的变量时，需要通过.value<