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'
相关推荐
渣哥4 分钟前
从 AOP 到代理:Spring 事务注解是如何生效的?
前端·javascript·面试
toobeloong19 分钟前
Electron 从低版本升级到高版本 - 开始使用@electron/remote的改造教程
前端·javascript·electron
悠哉摸鱼大王22 分钟前
前端获取设备视频流踩坑实录
前端·javascript
铅笔侠_小龙虾32 分钟前
深入理解 Vue.js 原理
前端·javascript·vue.js
西西学代码35 分钟前
Flutter---showCupertinoDialog
java·前端·flutter
你的眼睛會笑38 分钟前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
ZTLJQ1 小时前
植物大战僵尸HTML5游戏完整实现教程
前端·游戏·html5
无光末阳1 小时前
vue 环境下多个定时器的创建与暂停的统一封装
前端·vue.js
Hilaku1 小时前
技术Leader的“第一性原理”:我是如何做技术决策的?
前端·javascript·面试