Vue3 中常用的 Composition(组合)API-ref(引用) 函数

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函数。