响应式数据ref()和reactive()的使用

news/2025/2/24 13:04:07

官方网址：响应式基础 | Vue.js

在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的两个核心 API。它们的用法和适用场景有所不同，以下是它们的详细说明和使用方法。

ref

ref 用于创建一个响应式的基本类型或对象类型的数据。它会将数据包装在一个对象中，并通过 .value 访问或修改数据。

使用方法

基本类型：ref 通常用于基本类型（如 String、Number、Boolean 等）。
对象类型：ref 也可以用于对象类型，但更推荐使用 reactive。

javascript">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。

javascript"><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去赋值修改。

javascript">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

不可以直接修改，错误示例如下：

javascript">import { ref } from 'vue'
const count = ref(0);
const str = ref('');

count = 2;//这是错误的
str = "小明";//这是错误的

reactive

英/riˈæktɪv/

reactive 用于创建一个响应式的对象（包括数组）。它会递归地将对象的所有属性转换为响应式数据。

使用方法

对象类型：reactive 主要用于对象或数组。
基本类型：reactive 不能直接用于基本类型。

javascript">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; // 修改嵌套属性