Vue3 响应式API——Ref、Reactive

1. reactive api

为什么要使用reactive api,因为想要复刻options api的做法,在setup函数中是行不通的,data函数中定义的变量之所以是响应式的,是因为经过了reactive函数的处理。

可以看到这样的写法变量counter不是响应式的。

使用reactive api修改之后:将counter放在对象中,由reactive函数处理,使用处理过的返回值中的couter

可以看到,此时state对象中的counter已经是响应式的了。

reactive api传入类型必须是对象或者数组,这样在使用时,需要用state.counter的形式来取用counter,感觉有点麻烦,这时Vue3提供了另一个api:ref api。

2.ref api

使用ref api需要注意的地方:

1.ref传入类型:所有类型,比reactive api不受限制;

2.ref返回一个响应式的对象,value属性维护其值;

3.模板(template)中会自动解包,不需要以.value的形式获取值,但setup函数中不会自动解包。

如果我将counter放在一个对象中,再使用ref,那么模板是否会自动解包:不会

4. 原因:ref的解包是一个浅层的解包

此时需要.value来获取这个ref对象的值

但是reactive api 包裹的对象,可以深层解包

3.reactive判断的api

1. isProxy: 检查对象是否由reactive或readonly创建的proxy;

2. isReactive: 检查对象是否是由 reactive创建的响应式代理,但是如果该代理是 readonly 建的,但包裹了由 reactive 创建的另一个代理,它也会返回 true;

3.  isReadonly: 检查对象是否是由 readonly 创建的只读代理;

4.  toRaw: 返回 reactive 或 readonly 代理的原始对象(不建议保留对原始对象的持久引用)

5. shallowReactive: 创建一个响应式代理,它跟踪其自身 property 的响应性,但不执行嵌套对象的深层响应式转换(深层还是原生对象);

6. shallowReadonly: 创建一个 proxy,使其自身的 property 为只读,但不执行套对象的深度只读转换(深层还是可读、可写的);

4.Ref api 的补充

假如想对响应式对象解构赋值,尽管是reactive处理过的对象,解构出来的值不会是响应式的

想让其成为响应式的,可以使用toRefs api

1.toRefs api: 将reoctive对象中的所有属性都转成ref,建立连接

而且,toRefs api相当于在info中的每一个属性的value与解构之后的值做了连接,一个更改之后另一个也会随之更改

如果只想对其中一个属性转换为ref,那么可以使用toRef api

2.toRef: 对其中一个属性进行转换ref,建立连接

格式:toRef(object,key)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容