当前位置：首页 > news >正文

vue3定义响应式数据（ref,reactive）

news 来源：原创 2024/9/19 19:01:29

一 ref 定义响应式数据

在 Vue 3 中，ref 是一个用于创建响应式数据的 API。ref 可以用来使普通的 JavaScript 值（如字符串、数字、对象等）变得响应式，从而在 Vue 的模板中使用和自动更新。

基本用法

导入 ref：首先，你需要从 Vue 中导入 ref。
创建响应式数据：使用 ref 创建一个响应式的值。
访问和更新响应式数据：你可以通过 .value 属性来访问和更新响应式数据。

**作用：**定义响应式变量。
语法：let xxx = ref(初始值)。
**返回值：**一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
注意点：

JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

ref 创建：基本类型的响应式数据：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 ref 示例</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="app"><p>当前计数: {{ count }}</p><button @click="increment">增加计数</button></div><script>const { ref, createApp } = Vue;createApp({setup() {// 创建一个响应式的计数器const count = ref(0);// 定义增加计数的函数function increment() {count.value++;}// 返回响应式数据和方法以供模板使用return {count,increment};}}).mount('#app');</script>
</body>
</html>

ref 创建：对象类型的响应式数据：

const { ref, createApp } = Vue;createApp({setup() {const state = ref({name: 'Alice',age: 30});const items = ref([1, 2, 3]);function updateName(newName) {state.value.name = newName;}function addItem(item) {items.value.push(item);}return {state,items,updateName,addItem};}
}).mount('#app');

二 reactive定义响应式数据

在 Vue 3 中，reactive 是一个用于创建响应式对象的 API。与 ref 主要用于处理基本数据类型不同，reactive 适用于处理更复杂的数据结构，如对象和数组。使用 reactive 创建的对象会对其属性的变化进行响应式更新。

作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
语法：let 响应式对象= reactive(源对象)。
**返回值：**一个Proxy的实例对象，简称：响应式对象。
注意点：reactive定义的响应式数据是“深层次”的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 reactive 示例</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="app"><p>姓名: {{ state.name }}</p><p>年龄: {{ state.age }}</p><button @click="updateName('Bob')">更改姓名</button><button @click="incrementAge">增加年龄</button></div><script>const { reactive, createApp } = Vue;createApp({setup() {// 创建一个响应式对象const state = reactive({name: 'Alice',age: 30});// 更新对象的属性function updateName(newName) {state.name = newName;}function incrementAge() {state.age++;}// 返回响应式对象和方法以供模板使用return {state,updateName,incrementAge};}}).mount('#app');</script>
</body>
</html>

说明

创建响应式对象：

const state = reactive({ name: ‘Alice’, age: 30 }); 将一个包含 name 和 age
属性的对象转化为响应式对象。

访问和更新响应式对象：

在模板中，你可以直接使用 state.name 和 state.age。在 JavaScript 代码中，你可以直接通过 state.name 和 state.age 访问和修改这些属性。

响应式更新：

当你更新 state 对象的属性时，例如调用 updateName(‘Bob’) 或 incrementAge()，Vue会自动更新视图。

三 ref 和reactive 的区别

宏观角度看：

ref用来定义：基本类型数据、对象类型数据；
reactive用来定义：对象类型数据。

区别：

ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

使用原则：

若需要一个基本类型的响应式数据，必须使用ref。
若需要一个响应式对象，层级不深，ref、reactive都可以。
若需要一个响应式对象，且层级较深，推荐使用reactive。

ref

用途：

用于创建对基本数据类型（如 string、number、boolean）的响应式引用。
也可以用于创建对对象或数组的响应式引用，但在这种情况下，ref 本身是对对象或数组的一个“包裹”。

创建方式：

const value = ref(initialValue);

访问和更新：

对于基本数据类型，使用 .value 进行访问和更新。例如：value.value = 10。
对于对象或数组，可以使用 .value 访问和修改它们的内容，但 .value 只是用于访问 ref包裹的内容。具体的更新和访问内容会通过 .value 进行。

reactive

1 用途：

用于创建对复杂数据结构（如对象和数组）的响应式引用。
自动将整个对象或数组的属性变为响应式，而不需要显式地使用 .value。

2 创建方式：

const state = reactive(initialObject);

3 访问和更新：

直接通过对象或数组的属性访问和更新，不需要 .value。例如：state.name = 'Alice'。

四 toRefs 与 toRef

作用：将一个响应式对象中的每一个属性，转换为ref对象。
备注：toRefs与toRef功能一致，但toRefs可以批量转换。
语法如下：

<template><div class="person"><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>性别：{{person.gender}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeGender">修改性别</button></div>
</template><script lang="ts" setup>import {ref,reactive,toRefs,toRef} from 'vue'// 数据let person = reactive({name:'张三', age:18, gender:'男'})// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力let {name,gender} =  toRefs(person)// 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力let age = toRef(person,'age')// 方法function changeName(){name.value += '~'}function changeAge(){age.value += 1}function changeGender(){gender.value = '女'}
</script>