【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 } }

六、总结

相关推荐
美团技术团队8 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
安替-AnTi36 分钟前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林
Rrvive38 分钟前
localhost 和 127.0.0.1 的核心区别
前端
蓝倾38 分钟前
如何使用Python通过API接口批量抓取小红书笔记评论?
前端·后端·api
極光未晚40 分钟前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆42 分钟前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
uu_code0071 小时前
Android接入Pixelfree美颜SDK技术指南
前端
小鱼小鱼干1 小时前
使用 ESLint 实现 Git Commit 前的语法检查
前端
码哥DFS1 小时前
Flex布局原理
前端·css·css3
小样还想跑1 小时前
axios无感刷新token
前端·javascript·vue.js