Vue中的 ref、toRef 和 toRefs

ref

ref 是创建一个响应式的引用对象。这个对象有一个 .value 属性,用来存储任何类型的值(包括基本类型和复杂类型)。当这个值改变时,依赖于它的模板或计算属性会自动更新。

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

const count = ref(0); // 创建一个值为 0 的响应式引用
console.log(count.value); // 访问值
count.value++; // 修改值

toRef

toRef 是将一个对象的属性转换成一个 ref,这样即使原始对象的属性发生变化,新的 ref 也会保持响应性。

javascript 复制代码
import { toRef } from 'vue';

const state = { count: 0 };
const count = toRef(state, 'count'); // 将 state.count 转换为一个 ref

state.count = 1; // 改变原对象的属性
console.log(count.value); // 输出 1,说明 count 仍然是响应式的

toRefs

toRefs 是将一个包含多个响应式属性的对象转换成一个普通对象,其中每个属性都是一个 ref。这通常用于将响应式对象解构为单独的 ref,以避免失去响应性。

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

const state = reactive({ count: 0, name: 'Vue' });
const stateAsRefs = toRefs(state); // 将 state 的所有属性转换为 ref

state.count = 1; // 改变原对象的属性
console.log(stateAsRefs.count.value); // 输出 1
console.log(stateAsRefs.name.value); // 输出 'Vue'

主要区别

ref 是用于创建一个新的响应式引用,可以是任何类型的数据。

toRef 是用于将现有对象的一个特定属性转换为 ref,它不会创建新的数据副本,而是与原对象的属性保持同步。

toRefs 是用于将整个响应式对象的所有属性都转换为 ref,常用于函数组件中接收 props 或者解构响应式对象时,确保解构后的变量仍然具有响应性。

相关推荐
LaoZhangAI几秒前
沉浸式翻译API深度解析:500万用户的翻译神器如何配置[2025完整指南]
前端·后端
然我7 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆8 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder16 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang23 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol31 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
然我41 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林2 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止9 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react