vue中的Reactive,ref,readonly

一、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
我们通过reative和ref获取的响应式对象，但是在某一些情况下，我们希望这样数据可以传给其他组件，此时这些数据不能被修改，所以我们使用readonly函数。readonly函数传入对象后，返回结果为代理对象(proxy对象，该对象的set方法被劫持，不能进行修改)。
readonly常见的传入对象
类型一:普通对象
类型二:reactive返回的对象
类型三:ref返回的对象
readonly返回的对象不允许修改，但是在readonly处理的原来的对象是允许被修改的。readonly对象的本质是：readonly对象的返回结果的setter被劫持。

上面的并没有修改readonly属性的对象，所以可以在home组件中修改。
如上图所示使用readonly属性的就不可以进行更改。