ref函数--处理基本类型
以前我们的ref属性用处主要用于打标识，像原生js中的id标签一样。我们可以通过这个ref函数可以实现获取input元素，并让他获取焦点触发事件
而在v3中的是ref函数
先提出一个例子，我点击一个按钮，但是页面并没有重新渲染出我们想要的结构，但是在终端中已经看到数据已经发送了改变，只是没有渲染到页面上
因为我们这样的数据并不是一个响应式数据
如果把一个数据变成一个响应式数据，首先我们要引入ref这个对象，然后用ref包裹起来，这个ref就帮我们加工成了响应式数据
ref加工之后的数据变成了一个对象
一般来说我们把这个对象成为引用对象
它把get和set放到它的原型对象中，然后通过数据代理，实现了把value的值放到_value里面。
我们要读和改需要 .value
而现在有一件很神奇的事情，如果你在插值表达式中不使用.value那么页面展示，而加了.value反而没有效果
因为在模板中你不需要.value，v3已经帮我们+好了.value
ref函数--处理对象类型
对象类型也可以直接写在setup中，需要设置就直接在模板中.出来就可以了
现在有一个需求就是我点击一下这个按钮，改变这个工资
这种写法是错误的，之前我们的思路是要把这个数据变成一个响应式的数据，然后通过.value修改值
我们发现可以直接.出来，而且这个类型也变成了我们不熟悉的ref类型而是Proxy代理对象
用一张图来说明
就是基本数据类型，确实是用过Reflmpl的value来获取，但是对象类型不是。不存在绿色的俩条线。而是变成了Proxy代理对象
总结
作用: 定义一个响应式的数据
语法: ``const xxx = ref(initValue)``
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
- JS中操作数据： xxx.value
- 模板中读取数据: 不需要.value，直接：<div>{
{xxx}}</div>
- 备注：
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠 Object.defineProperty()的 get与 set完成的。
- 对象类型的数据：内部 求助 了Vue3.0中的一个新函数—— reactive函数。
也就是reactive函数里面具体写了对Proxy的实现
reactive函数
作用: 定义一个 对象类型 的响应式数据（基本类型不要用它，要用 ref 函数）
第一步先去引用一下它
如果我们实现普通数据类型去搞reactive，发现，页面直接警告。说普通数据的一个数据不做成响应式数据 。因此我们要给他传入一个对象类型
变成了一个响应式数据，而我们使用reactive包裹那就不需要.value就可以拿到它的响应对象
reactive对象处理数据的一个深层次的
也能访问数组类型
所有复杂数据类型就是建议使用reactive，而不是ref，使用ref每次都要写一下.value太麻烦了
通过reactive包裹一个对象，然后把数据放到对象。使用就person.一下属性就可以出来，这样更加语义化了 。
总结
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。