一、Reactive api
下面我们可以一个例子
如图所示,当我们点击button
按钮的时候,是没有响应式效果的,此时我们需要reactive api
。
那么这是什么原因呢?为什么就可以变成响应式的呢:
因为当我们使用reactive函数处理我们的数据之后,数据再次被使用时就会进行依赖收集,当数据发生改变时,所有收集到的依赖都是进行对应的响应式操作,我们编写的data选项,也是在内部交给了reactive函数将其编程响应式对象的。
二、Ref apireactive api
对传入的类型是有限制的,要求我们必须传入一个对象或者数组,但是如果我们传入基本数据类型的话,会报一个警告(String, Number, Boolean
)。
在template
模板中,vue会自动帮助我们解包,所以我们不需要使用ref.value
进行操作。
但是在setup
内部,vue不会帮助我们进行解包操作,此时我们需要使用ref.value
ref的解包只是浅层解包
如上述两张图所示,第一张图,在ref
对象外层嵌套了一层普通对象,此时在template
中就必须加上value
才可以访问。在下面使用reactive
对象进行嵌套,此时不需要加value
也可以访问。
三、readonly api
我们通过reative
和ref
获取的响应式对象,但是在某一些情况下,我们希望这样数据可以传给其他组件,此时这些数据不能被修改,所以我们使用readonly
函数。readonly
函数传入对象后,返回结果为代理对象(proxy对象,该对象的set方法被劫持,不能进行修改)。readonly常见的传入对象
类型一:普通对象
类型二:reactive返回的对象
类型三:ref返回的对象
readonly返回的对象不允许修改,但是在readonly处理的原来的对象是允许被修改的。readonly
对象的本质是:readonly
对象的返回结果的setter
被劫持。
上面的并没有修改readonly
属性的对象,所以可以在home组件中修改。
如上图所示使用readonly
属性的就不可以进行更改。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/122889417
内容来源于网络,如有侵权,请联系作者删除!