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'
相关推荐
程序员的世界你不懂9 分钟前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技11 分钟前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip19 分钟前
JavaScript二叉树相关概念
前端
attitude.x1 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java1 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)1 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术2 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫2 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓2 小时前
JavaWeb--day1--HTML&CSS
前端·css·html