IT评测·应用市场-qidao123.com技术社区

标题: 响应式数据ref()和reactive()的利用 [打印本页]

作者: 半亩花草 时间: 2025-2-24 15:01
标题: 响应式数据ref()和reactive()的利用
官方网址：响应式基础 | 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 实用于对象或数组，尤其是嵌套对象。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)