ref 函数介绍

ref 作用就是将基础数据转换为响应式数据，把数据包装成响应式的引用数据类型的数据。
通过对参数返回值的 value 属性获取响应式的值，并且修改的时候也需要对 value 进行修改。
在vue2当中，通过给元素添加 ref=’xxx’然后使用refs.xxx的方式来获取元素，vue3也可以。
当 ref 里面的值发生变化的时候，视图会自动更新数据。
ref 可以操作基本数据类型和复杂数据类型，建议使用 ref 操作只对基本数据类型进行操作。

ref 函数使用

使用 ref 函数很简单，首先要在页面引用，然后就可以直接使用了，具体怎么使用呢，下面为了方便介绍，简单来几个案例。

ref 函数处理基本数据类型

首先提一个需求：页面有一个名称需要显示，有一个按钮，点击按钮的时候修改页面展示的这个名字。

刷新，可以正常渲染数据，但是点击按钮修改名字的时候，出现问题！

为什么使用过 ref 将数据映射为响应式数据还是报错呢？我们可以先打印一下 ref 包裹后，也就是 name_ref 这个参数，看一下结构。

修改代码：

码刷新页面查看效果

有一点需要说一下哈，就是在单文件组件中，不必写value，因为setup方法会自动解析，简单的可以理解成 html 代码不需要额外操作 value，但是逻辑层需要。

ref 函数处理复杂数据类型

不建议使用 ref 函数处理复杂数据类型（数组、对象等），用 ref 函数处理基本数据类型（数字、字符串等）就可以了。
例如我们写一个案例，创建一个个人信息，放到对象里面展示

我们先看一下对象被 ref 函数包裹后的数据结构。

我们修改也通过 value 进行操作

刷新页面，查看效果

ref 函数获取单个DOM元素

和 vue2 一样，可以使用 ref 获取元素，用法和操作数据类型相似。
页面上有一个标签，点击按钮，获取标签的相关数据。

运行效果

reactive 函数介绍

上面说了 ref 函数的基本用法，接下来是 reactive 函数，它的用法与 ref 函数的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是 ref 用于基本数据类型，而 reactive 是用于复杂数据类型，所以说，不建议用 ref 函数来处理复杂数据类型的原因就是，有 reactive 来处理复杂类型数据。