ref 和 reactive_const form = reactive({ })-优快云博客

本文链接：https://blog.youkuaiyun.com/jkl12345669/article/details/144722584

这是显示form数据的表单

一开始我给form用的是reactive

先是用的form.value = row;赋值

然后可以看到，form表单里面成功复赋值了，但是没有显示成功显示出来。

而这样直接给form赋值就可以显示。

后来发现，若form表单是用的reactive创建的响应式数据，再想用form.value = row;这样的赋值方法，就得在上面加value

若form表单是用的ref创建的响应式数据。就用 form.value = row;赋值，

并且这样就能显示。

使用ref，

const teacherQueryParams = ref({

pageNum: 1,

pageSize: 1000

});

引用的时候需要 .value

function getTeacherList() {

// 假设listTeacher是一个异步函数，用于获取教师列表

listTeacher1(teacherQueryParams.value).then(response => {

console.log(response);

teacherList.value = response.rows;

});

}

使用reactive，

const teacherQueryParams = reactive({

pageNum: 1,

pageSize: 1000

});

引用的时候不需要 .value

function getTeacherList() {

// 假设listTeacher是一个异步函数，用于获取教师列表

listTeacher1(teacherQueryParams).then(response => {

console.log(response);

teacherList.value = response.rows;

});

}

在Vue 3中，ref和reactive都用于创建响应式数据，但它们之间存在一些关键差异，这些差异决定了在不同情况下你应该选择哪一个。下面是ref和reactive的主要区别，以及它们各自的用例：

1. `ref`

用途：ref用于创建一个单一的响应式引用。它适用于存储单个值，如字符串、数字、布尔值或对象。
访问方式：当你使用ref创建一个响应式变量时，你需要通过.value属性来访问或修改其值。
示例：
javascript

const form = ref({
    name: '',
    duration: '',
    totalScore: ''
});

访问或修改form中的属性时，你需要使用form.value.name。

2. `reactive`

用途：reactive用于创建一个响应式对象。它适用于需要响应式更新的复杂数据结构，如对象或数组。
访问方式：使用reactive创建的对象，你可以直接访问和修改其属性，不需要通过.value属性。

示例：

javascript

const form = reactive({
    name: '',
    duration: '',
    totalScore: ''
});

直接访问或修改form中的属性，如form.name。

选择`ref`还是`reactive`？

使用ref的情况：
- 当你需要存储单个值或需要明确地控制响应式引用的访问时。
- 当你需要在模板中直接使用变量，而不需要通过对象属性访问时。
使用reactive的情况：
- 当你需要创建一个包含多个属性的响应式对象时。
- 当你需要在对象内部进行更复杂的数据操作，并且希望这些操作都是响应式的。