Vue3前端框架常见组合式API一

一、reactive函数1.1、说明

用来定义响应式数据,reactive是一个函数,它可以定义一个复杂数据类型,成为响应式数据。

通常是用来定义响应式对象数据。

1.2、问题案例

会发现,普通的对象是不能实现响应式的。

1.、问题解决

需要使用reactive函数将需要响应的对象作为函数的参数即可。代码如下:

1.4、为什么变成响应式

这是因为当我们使用reactive函数处理我们的数据之后,数据再次被使用时就会进行依赖收集;

当数据发生改变时,所有收集到的依赖都是进行对应的响应式操作(比如更新界面);

事实上,我们编写的data选项,也是在内部交给了reactive函数将其编程响应式对象的

1.5、注意问题

通过reactive函数进行响应式对数据的类型是有要求限制的,它要求我们必须传入的是一个对象或者数组类型:如果我们传入一个基本数据类型(String、Number、Boolean)会报一个警告。

二、ref函数2.1、说明

定义响应式数据。ref函数,常用于为简单数据类型定义为响应式数据。

在修改值,获取值的时候,需要.value

在模板中使用ref申明的响应式数据,可以省略.value,vue会自动解包

2.2、代码案例1

通过ref函数实现对基本数据类型的数据进行响应式操作。

2.、代码案例2

实际上ref也可以实现对复杂数据类型的响应式操作。

2.4、reactive和ref函数的对比

相同点:都可以实现定义响应式数据。

不同点:

reactive用于复杂数据类型,ref用于基本数据类型;

reactive的使用场景;

用于在本地中直接定义数据

多个数据之间是有关系/联系,是一个整体,比如说完整的一个用户对象的定义。

ref的使用场景

明确的一点是,ref函数使用频率更高;

定义本地的一些简单基本数据类型的数据;

定义从后台接口中获取到的数据;

2.5、ref后台获取数据三、toRefs函数购买专栏解锁剩余29%


转载请注明:http://www.aierlanlan.com/grrz/5742.html