ref和reactive, toRefs的使用

看尤雨溪说:为什么Vue3 中应该使用 Ref 而不是 Reactive?

toRefs

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

// 定义一个响应式对象
const state = ref({
  count: 0,
  name: 'Vue'
});

// 使用toRefs转换为响应式引用对象
const reactiveState = toRefs(state);

// 现在你可以对reactiveState进行解构赋值并保持响应性
const { count, name } = reactiveState;

// 当你改变count或name的值时,state的值也会相应改变
count.value++; // 相当于state.count++
name.value = 'Vue3'; // 相当于state.name = 'Vue3'
相关推荐
非凡ghost13 分钟前
Affinity Photo(图像编辑软件) 多语便携版
前端·javascript·后端
非凡ghost15 分钟前
VideoProc Converter AI(视频转换软件) 多语便携版
前端·javascript·后端
endlesskiller21 分钟前
3年前我不会实现的,现在靠ai辅助实现了
前端·javascript
用户9047066835723 分钟前
commonjs的本质
前端
Sailing31 分钟前
5分钟搞定 DeepSeek API 配置:从配置到调用一步到位
前端·openai·ai编程
Pa2sw0rd丶34 分钟前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js
非凡ghost1 小时前
ToDoList(开源待办事项列表) 中文绿色版
前端·javascript·后端
j七七1 小时前
5分钟搭微信自动回复机器人5分钟搭微信自动回复机器人
运维·服务器·开发语言·前端·python·微信
快起来别睡了1 小时前
TypeScript装饰器详解:像搭积木一样给代码加功能
前端·typescript
OpenTiny社区1 小时前
如何使用 TinyEditor 快速部署一个协同编辑器?
前端·vue.js