用来定义响应式数据,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%