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 或者解构响应式对象时,确保解构后的变量仍然具有响应性。

相关推荐
长空任鸟飞_阿康几秒前
LangChain 技术栈全解析:从模型编排到 RAG 实战
前端·python·langchain
chilavert3182 分钟前
技术演进中的开发沉思-258 Ajax:自定义事件
前端·ajax·okhttp
南知意-7 分钟前
从零搭建 Live2D 看板娘教程(自建API避墙版)
服务器·前端·vue.js·开源·博客·美化·看板娘
来杯三花豆奶15 分钟前
Vue 2 中 Store (Vuex) 从入门到精通
前端·javascript·vue.js
四瓣纸鹤15 分钟前
从vue2和vue3的区别聊起
vue.js·状态模式
Lethehong15 分钟前
React构建实时股票分析系统:蓝耘MaaS平台与DeepSeek-V3.2的集成实践
前端·react.js·前端框架·蓝耘mcp·蓝耘元生代·蓝耘maas
LSL666_17 分钟前
1 验证码
java·服务器·前端·redis·验证码
少油少盐不要辣33 分钟前
前端如何处理AI模型返回的流数据
前端·javascript·人工智能
IT_陈寒35 分钟前
Java21新特性实战:5个杀手级改进让你的开发效率提升40%
前端·人工智能·后端
跟着珅聪学java36 分钟前
以下是使用JavaScript动态拼接数组内容到HTML的多种方法及示例:
开发语言·前端·javascript