温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue如何创建响应式数据对象

发布时间:2022-08-09 16:00:54 来源:亿速云 阅读:211 作者:iii 栏目:编程语言

这篇文章主要介绍了Vue如何创建响应式数据对象的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue如何创建响应式数据对象文章都会有所收获,下面我们一起来看看吧。

一、reactive

reactive方法根据传入的对象,创建返回一个深度响应式对象(Proxy代理对象)。

reactive 会对传入对象进行包裹,创建一个该对象的
Proxy代理对象。它是源对象的响应式副本,不等于原始对象。它==“深层”==转换了源对象的所有嵌套property(属性)
,解包并维持其中的任何ref引用关系。

响应式对象属性值改动,不管层级有多深,都会触发响应式。新增和删除属性也会触发响应式。

二、ref

ref 函数用来将一项数据包装成一个响应式 ref 对象。它接收任意数据类型的参数,作为这个 ref 对象 内部的 value property 的值。

  • 生成值类型数据(StringNumberBooleanSymbol)的响应式对象

  • 可以用ref对象.value访问或更改这个值。

  • 生成对象和数组类型的响应式对象 (对象和数组一般不选用ref方式,而选用reactive方式,比较便捷)

三、reactive对比ref

  • 从定义数据角度对比:

    • ref用来定义:任意数据类型

    • reactive用来定义:对象(或数组)类型数据

如何选择 ref 和 reactive?建议:

  • 基础类型值(String,Number,Boolean,Symbol) 或单值对象(类似{ count: 1 }这样只有一个属性值的对象) 使用 ref

  • 引用类型值(Object、Array)使用 reactive

  • 从原理角度对比:

    • ref通过Object.defineProperty()getset来实现响应式(数据劫持)。

    • reactive通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据

  • 从使用角度对比:

    • ref定义的数据:访问或更改数据需要.value

    • reactive定义的数据:操作数据与读取数据均不需要.value

四、toRef

  • 针对一个响应式对象(reactive封装)的prop(属性)创建一个ref,且保持响应式

  • 两者保持引用关系

语法:const 属性名= toRef(对象,'属性名')

五、toRefs

toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法

  • 将响应式对象(reactive封装)转成普通对象

  • 对象的每个属性(Prop)都是对应的ref

  • 两者保持引用关系

语法:const 属性名= toRefs(对象,'属性名')

注意:reactive封装的响应式对象,不要直接通过解构的方式return,这是不具有响应式的。

可以通过 toRefs 处理,然后再解构返回,这样才具有响应式

const state = reactive({ 
		age: 20,
      	name: 'zhangsan'});
return {...state}; // 错误的方式,会丢失响应式
return toRefs(state); // 正确的方式
//最佳方式
return ...toRefs(state)//将对象的各个属性的ref解构到对象根下面。

六、一些问题

为什么有了reactive函数还需要ref函数呢?

当我们只想让某个变量实现响应式的时候,采用reactive就会比较麻烦,因此vue3提供了ref方法进行简单值的监听,但并不是说ref只能传入简单值,他的底层是reactive,所以reactive有的,它都有。

记住:ref本质也是reactive,ref(obj)等价于reactive({value: obj})

关于“Vue如何创建响应式数据对象”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue如何创建响应式数据对象”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI