一、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