东莞微网站建设服务商中文域名
官方网址：响应式基础 | Vue.js
在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的两个核心 API。它们的用法和适用场景有所不同，以下是它们的详细说明和使用方法。
ref
ref 用于创建一个响应式的基本类型或对象类型的数据。它会将数据包装在一个对象中，并通过 .value 访问或修改数据。
使用方法
-
基本类型：
ref通常用于基本类型（如String、Number、Boolean等）。 -
对象类型：
ref也可以用于对象类型，但更推荐使用reactive。
import { ref } from 'vue';
// 创建一个响应式的基本类型数据
const count = ref(0);
// 创建一个响应式的对象类型数据
const user = ref({name: 'Alice',age: 25
});
// 访问和修改数据
console.log(count.value); // 0
count.value++; // 修改数据
console.log(user.value.name); // Alice
user.value.age = 26; // 修改对象属性在模板中使用
在模板中，ref 的值可以直接使用，不需要加 .value。
<template><div><p>Count: {{ count }}</p><button @click="count++">Increment</button></div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>注意事项
在<script setup> 脚本中和在模板中使用不同，在脚本中使用时必须使用.value去访问和修改，在模板中使用时不需要加.value
在js脚本中修改变量时，必须使用.value去赋值修改。
import { ref } from 'vue'
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1不可以直接修改，错误示例如下：
import { ref } from 'vue'
const count = ref(0);
const str = ref('');
count = 2;//这是错误的
str = "小明";//这是错误的reactive
英/riˈæktɪv/
reactive 用于创建一个响应式的对象（包括数组）。它会递归地将对象的所有属性转换为响应式数据。
使用方法
-
对象类型：
reactive主要用于对象或数组。 -
基本类型：
reactive不能直接用于基本类型。
import { reactive } from 'vue';
// 创建一个响应式的对象
const state = reactive({count: 0,user: {name: 'Alice',age: 25}
});
// 访问和修改数据
console.log(state.count); // 0
state.count++; // 修改数据
console.log(state.user.name); // Alice
state.user.age = 26; // 修改嵌套属性ref和reactive区别
-
ref适用于基本数据类型 -
reactive适用于对象或数组，尤其是嵌套对象。