composition API

一、composition API的基本使用

1、setup函数的基本使用

注意：setup()函数中不能使用this
注意：setup()比created()执行的早

（1）、setup函数的参数

注意:props属性依然需要写，因为需要定义传过来的值得类型等

（2）、setup()函数的返回值

注意：如果setup()和data中都定义了counter,那么使用的是setup()中的counter

（3）、 setup中定义方法（methods）

在以前的data中定义的数据是响应式的，那是因为data中返回的数据vue内部都是用reactive函数进行了处理

2、reactive API

可以使数据变成响应式

注意：reactive()函数中必须传入一个对象或者数组

3、ref API

ref 自动解包

注意：ref的返回值是一个对象 数据在value属性中。
ref()也可以传入对象

4、readonly API

readonly的原理就是proxy的set方法会被劫持

上边的三个案例都会报错 因为readonly()包裹的数据是不允许修改的
注意：readonly接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理

二、其他的API

1、isProxy isReactive isReadonly toRaw shallowReactive shallowReadonly

2、toRefs

toRefs函数包裹的必须是一个reactive对象

3、toRef

注意：toref和toRefs都必须传reactive对象 普通对象不可以
想要对reactive对象做解构的时候才会用到这两个API

4、unref isRef shallowRef triggerRef

5、使用customRef实现对双向绑定的数据进行节流

三、computed

注意：computed的返回值是一个ref对象

1、computed的基本使用

传入一个函数：get函数

传入一个对象：get和set

四、watchEffect

注意：watchEffect拿不到原来的值 但是watch可以

1、watchEffect的基本使用

watchEffect会自动收集需要侦听的依赖

注意：watchEffect一开始就会执行一次，
如果watchEffect()里边传入的函数中没有使用age,那么就不会收集age的依赖 意思就是age单独发生改变时并不会触发这个事件

2、watchEffect的停止侦听

3、watchEffect清除副作用

在onInvalidate函数中需要传入一个函数，在传入的这个函数中清除额外的副作用

4.在setup中使用ref

5、watchEffect的执行时机

五、watch

1、watch的基本使用

watch的三个参数，第一个是侦听源，第二个是回调函数，第三个是配置

注意：watch的第一个参数可以是ref对象 可以是reactive对象 可以是函数 可以是数组

第一个参数传get()函数：

第一个参数传reactive对象

如果不想让newvalue 和 oldvalue的值是reactive对象 而是普通的对象 那么应该这样写：

注意：如果第一个参数是reactive对象的话 默认是深度侦听的

如果reactive包裹的是一个数组的话

第一个参数传ref对象

2、watch侦听多个数据源

侦听多个数据源的做法就是第一个参数传进去一个数组

这个案例的newvalue的值和oldvalue的值就成了数组形式

也可以这样写：

3、watch的选项

深度侦听

注意：如果第一个参数是reactive对象的话 默认是深度侦听的

如果不是reactive对象还想深度侦听的话 需要这样：

首次执行

imdedite:true的话oldvalue的是是undfind，因为这个时候没有旧的值

六、生命周期钩子

注意：生命周期可以注册多个

七、provide和inject

provide()有两个参数 第一个是传过去的key,第二个是传过去的值
inject()可以有两个参数 第一个是传过来的key,如果传来的没有值 第二个参数可以设置默认值

建议：传过去的值一般都用readonly()包裹 这样的话子孙组件就没办法修改这个值了

八、练习

1、计数器案例

2、修改title

3、本地缓存LocalStorage

九、jsx