Vueref，reactive 响应式引用的用法和原理

Posted 2022-11-05

代码示例：

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

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

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

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

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

两秒之后:

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

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

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

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

回到页面上我们刷新:

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

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

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

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

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

它会变成一个:

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

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

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

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

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

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

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

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

它会变，是不是就具备强势了？

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

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

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

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

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

所以在上面:

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

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

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

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

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

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

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

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