浅析Vue3中ref与reactive的使用和区别

最新推荐文章于 2024-05-26 03:38:41 发布

浪漫文艺前端程序猿

最新推荐文章于 2024-05-26 03:38:41 发布

阅读量1.8k

点赞数 1

分类专栏：前端文章标签：前端 vue.js typescript

本文链接：https://blog.csdn.net/m0_46627407/article/details/125506051

版权

本文介绍了Vue3中ref和reactive两种响应式API的使用方法，包括它们的类型声明、变量定义和赋值。特别强调了在处理ref数组和reactive对象时的注意事项，如不能直接改变reactive数组的引用，以及解构reactive对象会导致失去响应性。此外，指出了ref适用于原始类型和需要重新赋值的对象，而reactive适合不变的对象。最后，探讨了两者在实际应用场景中的选择。

摘要由CSDN通过智能技术生成

Vue3响应式API——ref

ref 是Vue3中最常用一个响应式 API，可以用来定义所有类型的数据
注意：本文写法为TypeScript，如果没有了解过需要先了解一下TypeScript
TypeScript文档阅读

类型声明

在开始使用 API 之前，要先了解一下在 TypeScript 中，ref 需要如何进行类型声明声明方式：使用 <> 来包裹类型定义，紧跟在 ref API 之后：

//基本数据类型
const name=ref<number>(1)

//引用数据类型
const foods1=ref<Array<string>>(['苹果','香蕉'])

变量定义

/*
*基本类型
*/
字符串
const str = ref<string>('前端');

数值
const nums= ref<number>(1);

布尔值
const isbool= ref<boolean>(true);
......
/*
*引用类型
*/
数组
const ids=ref<Array<number>>([1,2