【Vue3学习】setup语法糖中的ref,reactive,toRef,toRefs

在 Vue 3 的组合式 API(Composition API)中,ref、reactive、toRef 和 toRefs 是四个非常重要的工具函数,用于创建和管理响应式数据。

一、ref

用ref()包裹数据,返回的响应式引用对象,包含一个 .value 属性,用于访问或修改值

typescript 复制代码
import { ref } from 'vue';

const count = ref(0); // 创建一个响应式引用,初始值为 0
console.log(count.value); // 输出: 0

count.value++; // 修改值
console.log(count.value); // 输出: 1

二、reactive

reactive 用于创建一个响应式对象。它可以将一个普通对象转换为响应式对象,对象的所有属性都会变成响应式的。在访问值的时候,可直接用点的方式去访问,对比ref包裹的数据,后者需要.value才能访问到值

typescript 复制代码
import { reactive } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 25
});

console.log(state.name); // 输出: 'Alice'

state.age = 30; // 修改属性
console.log(state.age); // 输出: 30

三、toRef

toRef 用于从一个响应式对象中提取一个属性,并将其转换为一个响应式引用(ref)。它保持与原始对象的响应式连接,即使原始对象的属性值发生变化,toRef 创建的引用也会同步更新。

typescript 复制代码
import { reactive, toRef } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 25
});

const nameRef = toRef(state, 'name'); // 提取 `name` 属性并创建一个 ref
console.log(nameRef.value); // 输出: 'Alice'

state.name = 'Bob'; // 修改原始对象的属性
console.log(nameRef.value); // 输出: 'Bob'

nameRef.value = 'Charlie'; // 修改 ref 的值
console.log(state.name); // 输出: 'Charlie'

四、toRefs

toRefs 用于将一个响应式对象的所有属性转换为响应式引用(ref),并返回一个包含这些引用的普通对象。它通常用于解构响应式对象时,保持属性的响应式。

typescript 复制代码
import { reactive, toRefs } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 25
});

const { name, age } = toRefs(state); // 将所有属性转换为 ref
console.log(name.value); // 输出: 'Alice'
console.log(age.value);  // 输出: 25

state.name = 'Bob'; // 修改原始对象的属性
console.log(name.value); // 输出: 'Bob'

name.value = 'Charlie'; // 修改 ref 的值
console.log(state.name); // 输出: 'Charlie'

五、补充

上文说到了,解构对象会失去响应式绑定,这里补充当使用展开运算符时出现的问题

typescript 复制代码
import { reactive } from 'vue';

const a = reactive({ name: 'Alice', age: 25 });
const b = reactive({ ...a });

// 修改 a 中的属性
a.age = 30;

console.log(a); // { name: 'Alice', age: 30 }
console.log(b); // { name: 'Alice', age: 25 }

如果希望 b 中的属性与 a 中的属性保持同步,可以使用 toRefs 将 a 的属性转换为响应式引用,然后展开到 b 中。

typescript 复制代码
import { reactive, toRefs } from 'vue';

const a = reactive({ name: 'Alice', age: 25 });
const b = { ...toRefs(a) };

// 修改 a 中的属性
a.age = 30;

console.log(a); // { name: 'Alice', age: 30 }
console.log(b); // { name: Ref<	string	> { value: 'Alice' }, age: Ref<	number	> { value: 30 } }

六、总结

相关推荐
zwjapple1 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止5 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall5 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴5 小时前
简单入门Python装饰器
前端·python