Vue3—09—CompositionAPI（一）

---

 

一、CompositionAPI介绍

一个setup就是本组件的一个功能点；

一个组件可能也是一大堆功能的集合体；组件的作用在于功能的分割性和可复用性；

但是功能分割到这个组件后，可能这个功能还是有很多小功能，这个时候每个小功能都是一个setup；

 

 

setup

 

 

 

 

 

 

 

 

二、响应式问题

我们现在使用compApi，return返回的对象，里面的数据都不是响应式的，因为没有使用reactive（）函数添加到响应式系统里；

所以我们可以使用reartiveAPI或refAPI使得上setup返回的函数是响应式的；并是深层次的响应式；

 

 

三、CompositionAPI之响应式api  

1.reactiveApi

我们现在使用compapi，return返回的对象，里面的数据都不是响应式的，因为没有使用reactive（）函数添加到响应式系统里；

所以我们可以使用aeartiveAPI使得上setup返回的函数是响应式的；并是深层次的响应式；

2.readOnly（）函数

使用readOnly（）返回的对象，不管是普通对象还是经过reative（）的响应式对象，都不可以被修改了；

原理，做了数据劫持，停止他们的set行为！

 

 

 

 3.refApi

也是深层次的响应式；

ref也会返回一个响应式的对象；然后我们把这个对象赋值给自变量；

但是ref和reative比有点特殊，ref返回的对象需要取值需通过自变量名.value的方式；因为它是一个引用，

和reacitve（）区别：第一可以穿基本数据类型，第二需要.value获取值；

const a= 100；
const  a  =  ref(100);

这个是有区别的，第一个a它的数据类型是数字；第二个a的数据类型是对象，因为ref（）会返回一个对象，所以a成了对响应式对象的一个引用，a引用着ref里的value100；

 

 

（1）refApi的自动解包

 

浅解包和浅拷贝差不多，都只拷贝浅层的，深层的还是只拷贝引用地址；

（2）toRefs（）和toRef（）

当我们需要将reactive（）包裹的响应式对象进行解构赋值时，就需要使用toRefs（），不然解构赋值的不是响应式对象；

当然，toRefs()之后得到的响应式对象其实是一种对原有对象的引用；

什么时候使用toRefs或者toRef？在需要将reavtive对象转化成ref对象时需要用到；

 

 

 

（3）ref其他的api

 

 

 （4）customRef

customref（）需要传过来一个函数，可以是箭头函数；

这个函数要有两个参数，分别是tack决定什么时候手机依赖，和trigger决定什么时候触发更新依赖；

 

 

 

 

 

 

四、CompositionAPI之computed

computed会返回一个响应式的对象，不管你给它传的的普通对象还是ref对象，它本身都会返回一个ref对象；

 

 

 

 

 

五、CompositionAPI之侦听器

在vue3中侦听器有两个 api

1.watchEffect

首先最重要的一点是，watchEffect（）需要传入一个参数，而这个参数是一个函数，这个函数会在setup运行时立即执行，并且执行的时候看那个响应式对象调用了，就把哪个响应式对象添加到依赖中；

 

 （1）停止侦听

watchEffect（）会返回一个stop作用的函数，我们调用返回的这个函数即可；

 

（2）停止侦听之后清楚掉副作用

需要注意的是，oninvaliddata参数，也是一个函数；

 

 

 

 

 

 

2.watch

(1)侦听单个数据源

第一种getter函数方式：函数里的第一个参数是侦听的数据源是一个对响应式对象进行了拓展运算符并返回，第二个参数是回调函数

第二种响应式对象方式：函数里的第一个参数是侦听的数据源要是一个响应对象，第二个参数是回调函数

 

 （2）侦听多个数据源

 

 （3）深层监听

第一种getter函数方式：函数里的第一个参数是侦听的数据源是一个对响应式对象进行了拓展运算符并返回，第二个参数是回调函数，第三个参数是一个对象表示开启深层监听

第二种响应式对象方式：函数里的第一个参数是侦听的数据源要是一个响应对象，第二个参数是回调函数，不需要第三个参数，本方式默认开启深层监听；