ref(引用)函数
此ref不同于vue2中元素中的ref属性，在vue2中它用来定义给元素定义ref属性控制元素的操作，类似于js的id，但是在vue3中它用于定义一个响应式的数据
它可以定义普通数据和对象类型的数据，两者之前有些不同，下面通过案例进行一一说明
案例演示(处理基本类型)
新增一个按钮，对已有的信息进行更改
发现问题
理论来说代码是没问题的，但是点击按钮数据不变，但是控制台也没有报错
为了验证是否修改成功，这边打印下
看起来数据是修改成功的，但是vue没有检测到数据的改变
问题是因为定义的name和age都是普通的字符串，不是响应式的数据，所以vue是不会检测到的，那么问题来了，如果把普通的数据定义成vue能监测到的响应式的数据呢？
这时候就要使用ref了
引入ref对象
使用ref之前，需要引入
// 引入ref对象
import {ref} from "vue";
使用ref对象
ref对象使用起来特别的简单，直接使用ref(xxx)即可
这时候案例来说就可以了，我们再次测试下
发现还是不行
refImpl(引用对象)
这是因为修改的方式不对，可以看到被ref修饰后的属性变成了一个refImpl对象
refImpl这个单词拆分的话可以这么理解，ref(reference)引用，impl(implment)实现，专业话语叫：引用对象
它也有getter和setter，并且我们可以通过vulue修改属性的值
所以如果想要修改属性，可以使用value进行修改
再次修改
一个奇怪的现象
案例来说，插值语法读取属性的时候，也是应该通过xxx.value获取的，但是如果这么写就获取不到
这是因为：在模板里面，不需要手动的.value的方式获取，vue3会自动帮助我们解析，如果发现是一个ref对象，就会自动帮我们获取.value属性
案例演示(处理对象类型)
除了可以处理基本类型，ref也支持处理对象类型，接下来升级一下案例，演示使用ref处理对象类型
定义一个对象类型的属性
把数据展示页面上
接下来提出需求，修改信息的时候把工作种类和薪水都改下，如果按照上面的写法使用.value获取，那就错了
如果使用ref传入对象，想要拿到属性就不用.value了
这说明，ref对基本数据类型直接使用的get和set，但是对于对象类型性来说，用的是ES6中的proxy
ref总结
-
作用: 定义一个响应式的数据
-
语法:
const xxx = ref(initValue)- 创建一个包含响应式数据的引用对象（reference对象，简称ref对象） 。
- JS中操作数据：
xxx.value - 模板中读取数据: 不需要.value，直接：
<div>{{xxx}}</div>
-
备注：
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠
Object.defineProperty()的get与set完成的。 - 对象类型的数据：内部 *“ 求助 ” *了Vue3.0中的一个新函数——
reactive函数。
