composition API(二)

其他的API

1、isProxy isReactive isReadonly toRaw shallowReactive shallowReadonly

composition API(二)

composition API(二)

2、toRefs

composition API(二)
composition API(二)

3、toRef

composition API(二)

composition API(二)

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

4、unref isRef shallowRef triggerRef

composition API(二)

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

composition API(二)
composition API(二)

二、computed

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

composition API(二)

1、computed的基本使用

传入一个函数:get函数
composition API(二)
传入一个对象:get和set
composition API(二)

三、watchEffect

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

1、watchEffect的基本使用

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

composition API(二)

composition API(二)

2、watchEffect的停止侦听

composition API(二)

composition API(二)

3、watchEffect清除副作用

composition API(二)

4.在setup中使用ref

composition API(二)

5、watchEffect的执行时机

composition API(二)
composition API(二)

四、watch

1、watch的基本使用

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

composition API(二)

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

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

composition API(二)

第一个参数传reactive对象

composition API(二)
如果不想让newvalue 和 oldvalue的值是reactive对象 而是普通的对象 那么应该这样写:
composition API(二)

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

第一个参数传ref对象

composition API(二)

2、watch侦听多个数据源

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

composition API(二)

composition API(二)

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

也可以这样写:composition API(二)

3、watch的选项

深度侦听

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

如果不是reactive对象还想深度侦听的话 需要这样:
composition API(二)

首次执行

composition API(二)
imdedite:true的话oldvalue的是是undfind,因为这个时候没有旧的值

上一篇:微信小程序组件解读和分析:七、button按钮


下一篇:Vue3-composition 技巧