vue3 reactive和ref的区别

Shero.李建业

于 2023-07-27 15:52:31 发布

阅读量195

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue技术(vue2、vue3) 文章标签： vue3

本文链接：https://blog.youkuaiyun.com/weixin_47000834/article/details/131962113

vue技术(vue2、vue3) 专栏收录该内容

32 篇文章

订阅专栏

Vue3中的reactive和ref都用于创建响应式数据，但reactive适用于复杂数据类型，如对象或数组，而ref则支持基本数据类型和对象。reactive创建的响应式对象需通过toRefs处理才能方便访问子属性，而ref在模板中会自动添加.value。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3 reactive和ref的区别

**一、相同点：**
两者都是用来定义响应式数据的；
**二、不同：**
reactive：
（1）它的响应式是更深层次的，底层是将传入的数据包装成一个proxy；
（2）推荐去定义复杂的数据类型； 参数必须是对象或者数组，如果想要使用reactive让某个数值变成响应式，要在外层包裹一个对象{}； 如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefs
ref：
（1）函数参数可以是基本数据类型，也可以接受对象类型；
（2）如果参数是对象类型时，其实底层的本质还是reactive,系统会自动根据我们给ref传入的值转换；
（3）在template中访问，系统会自动添加.value;在js中需要手动.value；