其他分享
首页 > 其他分享> > composition API(二)

composition API(二)

作者:互联网

其他的API

1、isProxy isReactive isReadonly toRaw shallowReactive shallowReadonly

在这里插入图片描述

在这里插入图片描述

2、toRefs

在这里插入图片描述
在这里插入图片描述

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()里边传入的函数中没有使用age,那么就不会收集age的依赖 意思就是age单独发生改变时并不会触发这个事件

在这里插入图片描述

在这里插入图片描述

2、watchEffect的停止侦听

在这里插入图片描述

在这里插入图片描述

3、watchEffect清除副作用

在这里插入图片描述

4.在setup中使用ref

在这里插入图片描述

5、watchEffect的执行时机

在这里插入图片描述
在这里插入图片描述

四、watch

1、watch的基本使用

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

在这里插入图片描述

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

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

在这里插入图片描述

第一个参数传reactive对象

在这里插入图片描述
如果不想让newvalue 和 oldvalue的值是reactive对象 而是普通的对象 那么应该这样写:
在这里插入图片描述

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

第一个参数传ref对象

const changename = ()=>info.name="james";

2、watch侦听多个数据源

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

在这里插入图片描述

在这里插入图片描述

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

也可以这样写:在这里插入图片描述

3、watch的选项

深度侦听

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

如果不是reactive对象还想深度侦听的话 需要这样:
在这里插入图片描述

首次执行

在这里插入图片描述
imdedite:true的话oldvalue的是是undfind,因为这个时候没有旧的值

标签:watchEffect,对象,watch,reactive,API,参数,侦听,composition
来源: https://blog.csdn.net/l_l_l_l_l_l_l_li/article/details/118220890