您现在的位置是：网站首页> 编程资料编程资料

浅谈vue3中ref、toRef、toRefs 和 reactive的区别_vue.js_

2023-05-24 391人已围观

简介 浅谈vue3中ref、toRef、toRefs 和 reactive的区别_vue.js_

二、reactive——定义响应式对象

• 用来定义“对象类型”的响应式数据。
• 参数只能传入对象类型，返回一个具有响应式状态的副本。
• 使用 reactive 定义的属性可以直接使用，不需要加 .value。
• 不要直接解构使用 reactive 定义的响应式对象，否则会造成该对象脱离 ref 响应式。需要用 toRefs 将其转化为响应式数据对象，然后再解构返回。

例如：

三、toRef——将一个 reactive 转化为一个 ref

• 针对一个响应式对象（reactive 封装）的 prop（属性）创建一个 ref，且保持响应式两者 保持引用关系。
• 接收两个参数：源响应式对象 和 属性名，返回一个 ref 数据。
• 获取数据值的时候需要加 .value。
• 使用 toRef 转化后生成的 ref 数据如果是引用类型数据时，那么它不是原始数据的拷贝，而是原始数据的引用，改变它的数据也会同时改变原始数据。

例如：在 setup 中使用父组件传递的 props 数据时，要引用 props 的某个属性，且要保持响应式连接，就必须使用 toRef。

四、toRefs——将多个 reactive 自动解构为多个 ref

• toRefs 用于将响应式对象转换为普通对象，其中普通对象的每个属性都是指向原始对象相应属性的 ref，两者保持引用关系。
• toRefs 常用于 ES6 的解构赋值操作。但是，对一个响应式对象直接解构时，解构后的数据将不再有响应式，而使用 toRefs 可以方便解决这个问题。
• 获取数据值的时候需要加 .value。
• 使用 toRefs 转化后生成的 ref 数据如果是引用类型数据时，那么它不是原始数据的拷贝，而是原始数据的引用，改变它的数据也会同时改变原始数据。
• 其作用和 toRef 类似，只不过 toRef 是对一个个属性手动赋值，而 toRefs 是自动解构赋值。

到此这篇关于浅谈vue3中ref、toRef、toRefs 和 reactive的区别的文章就介绍到这了,更多相关vue3 ref toRef toRefs reactive内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！