vue中的Reactive,ref,readonly

x33g5p2x  于2022-02-12 转载在 Vue.js  
字(0.9k)|赞(0)|评价(0)|浏览(300)

一、Reactive api
下面我们可以一个例子

如图所示,当我们点击button按钮的时候,是没有响应式效果的,此时我们需要reactive api

那么这是什么原因呢?为什么就可以变成响应式的呢:
因为当我们使用reactive函数处理我们的数据之后,数据再次被使用时就会进行依赖收集,当数据发生改变时,所有收集到的依赖都是进行对应的响应式操作,我们编写的data选项,也是在内部交给了reactive函数将其编程响应式对象的。
二、Ref api
reactive api对传入的类型是有限制的,要求我们必须传入一个对象或者数组,但是如果我们传入基本数据类型的话,会报一个警告(String, Number, Boolean)。

template模板中,vue会自动帮助我们解包,所以我们不需要使用ref.value进行操作。
但是在setup内部,vue不会帮助我们进行解包操作,此时我们需要使用ref.value
ref的解包只是浅层解包

如上述两张图所示,第一张图,在ref对象外层嵌套了一层普通对象,此时在template中就必须加上value才可以访问。在下面使用reactive对象进行嵌套,此时不需要加value也可以访问。
三、readonly api
我们通过reativeref获取的响应式对象,但是在某一些情况下,我们希望这样数据可以传给其他组件,此时这些数据不能被修改,所以我们使用readonly函数。readonly函数传入对象后,返回结果为代理对象(proxy对象,该对象的set方法被劫持,不能进行修改)。
readonly常见的传入对象
类型一:普通对象
类型二:reactive返回的对象
类型三:ref返回的对象
readonly返回的对象不允许修改,但是在readonly处理的原来的对象是允许被修改的。readonly对象的本质是:readonly对象的返回结果的setter被劫持。

上面的并没有修改readonly属性的对象,所以可以在home组件中修改。


如上图所示使用readonly属性的就不可以进行更改。

相关文章

最新文章

更多