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

六、总结

相关推荐
枷锁—sha4 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha5 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜21 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台39 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows