【Vue】ref,reactive 响应式引用的用法和原理 (2)

代码示例:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

现在比如说我nameObj 它是一个reactive这样的对象,或者说对数组的封装,

但是我现在突然之间想,‍‍我不希望有人能够对 nameObj 做变更,我想把它变成一个只读的形态,怎么变?

Vue 里面又提供了一个composition API的语法叫做readonly:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

我们可以定一个const copyNameObj 等于readonly(nameObj), 我们返回 return {nameObj,copyNameObj}这两个东西,‍‍ 然后这块我们怎么测试,我们可以这样去写, 首先我们两秒钟之后让nameObj[0]等于456,

然后再两秒钟之后也让 copyNameObj[0] 等于456,保存一下,‍‍你看页面上会报什么样的错, 保存一下,回到页面刷新,一开始显示一二三:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

两秒之后:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

它说‍‍ target is read only,也就是说你想改 copy出来的 object是没法去改变了,它会‍‍报警的。‍‍

readonly这样的一个新的composition API的语法能够让我们对这种‍‍响应式的引用做一个限制,‍‍通过readonly对响应式的引用做一个处理之后,

返回的对象是不可以被你去强势的修改的。‍‍

接着我们把‍‍ reactive和readonly放在一起去用:

【Vue】ref,reactive 响应式引用的用法和原理 (2)
【Vue】ref,reactive 响应式引用的用法和原理 (2)

回到页面上我们刷新:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

dell 两秒钟之后变成 lee。‍‍

你可能会有这样的想法,我不希望用 nameObj点name,我希望做一个解构,我直接这么写行不行?‍‍

【Vue】ref,reactive 响应式引用的用法和原理 (2)

然后return一个name,‍‍这块我直接用name就行了:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

保存刷新,dell‍‍两秒钟之后也没有去做任何的切换,这是为什么?

其实原因也很简单,因为我们说 name dell :

【Vue】ref,reactive 响应式引用的用法和原理 (2)

它会变成一个:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

也就是说这个对象它是显示的,但现在如果你‍‍拿到的是对象里面的具体的数据的话,就是说具体name的这个值的话,它是一个普通的字符串,这个值并不是一个显示的数据的,

所以你把这个值导出出去的话,这个值不具备显示,

所以‍‍大家可以看到你对这个值做修改的时候,因为你用的是‍‍它这个值而不是这个对象,所以它不具备强势的一个特性。‍‍

那么如果‍‍你想做这种解构解决这个问题的话,可以怎么做?

Vue 里面又提供给我们一个新的语法,‍‍也是composition API的一个语法叫做toRefs。‍‍

我们在这里‍‍对toRefs(nameObj)做一个包装,‍‍然后再做解构,

再接着 return这个 name 就可以了:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

保存一下,我们可以到这里来看一下效果,刷新,一秒‍‍两秒:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

它会变,是不是就具备强势了?

toRefs它的原理是什么?toRefs它会这么去做。‍‍本身nameObj 是这样的一个proxy的对象:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

当调用toRefs之后,它会把这个东西转化成一个这样的对象。‍‍

【Vue】ref,reactive 响应式引用的用法和原理 (2)

ta会把你这样一个proxy name  dell  变成:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

这么转化之后,‍‍你看你做解构的时候调用这个name,实际上调用的是这个东西:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

你再去‍‍ return 这个 name,实际上‍‍返回的是一个proxy 这样的一个东西:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

所以在上面:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

相当于‍‍你调用的是什么?是 name 的 value里面的内容。

把一个reactive返回的对象‍‍转化成 ref 的一种形式。‍‍

如果你传两个东西,比如说 name age:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

那么它去做转化的时候,它会这么去转化,比如说age 28:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

它会转化成两个东西, 它会转化成一个‍‍ name proxy 这样一个东西, 然后把 age也会做转换,‍‍转化成 age proxy,value冒号28:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

所以toRefs会把之前这样的一个东西变成这样的一个东西:

【Vue】ref,reactive 响应式引用的用法和原理 (2)

当你变完了之后,‍‍你再去做解构的时候,拿到的name也好,age也好,其实都变成了一个响应式的数据,

这样的话在页面上你用这个name或者age就不会有任何的问题了:

【Vue】ref,reactive 响应式引用的用法和原理 (2)



原文始发于微信公众号(基根奋斗营):【Vue】ref,reactive 响应式引用的用法和原理 (2)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/104101.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!