Vue3 为开发者提供 ref和 reactive两个 API 来实现响应式数据，这也是我们使用 Vue3 开发项目中经常用到的两个 API。
本文从入门角度和大家介绍这两个 API，如果有错误，欢迎一起讨论学习~
本文代码基于 Vue3 setup 语法。
在入门阶段，我们需要掌握的是「是什么」、「怎么用」、「有什么注意」，基本就差不多了。
1. reactive API 如何使用？
reactive方法用来创建响应式对象，它接收一个对象/数组参数，返回对象的响应式副本，当该对象的属性值发生变化，会自动更新使用该对象的地方。
下面以分别以对象和数组作为参数演示：
import { reactive } from'vue'letreactiveObj=reactive({ name : 'Chris1993' }); letsetReactiveObj= () => { reactiveObj.name='Hello Chris1993'; } letreactiveArr=reactive(['a', 'b', 'c', 'd']); letsetReactiveArr= () => { reactiveArr[1] ='Hello Chris1993'; }
模版内容如下：
<template><h2>Vue3 reactive API Base</h2><div> Object:<span@click="setReactiveObj">Update</span></div><div> Array:<span@click="setReactiveArr">Update</span></div></template>
此时页面展示如下：
当我们分别点击 Update按钮后，可以看到数据变化后，视图上内容也一起更新了：
2. ref API 如何使用？
ref 的作用就是将一个原始数据类型（primitive data type）转换成一个带有响应式特性的数据类型，原始数据类型共有7个，分别是：String/ Number /BigInt /Boolean /Symbol /Null /Undefined。
ref的值在 JS/TS 中读取和修改时，需要使用 .value获取，在模版中读取是，不需要使用 .value。
下面以分别以字符串和对象作为参数演示：
import { ref } from'vue'letrefValue=ref('Chris1993'); letsetRefValue= () => { refValue.value='Hello Chris1993'; } letrefObj=ref({ name : 'Chris1993' }); letsetRefObj= () => { refObj.value.name='Hello Chris1993'; }
模版内容如下：
<template><h2>Vue3 ref API Base</h2><div> String:{{refValue}} <span@click="setRefValue">Update</span></div><div> Object:{{refObj.name}} <span@click="setRefObj">Update</span></div></template>
此时页面展示如下：
当我们分别点击 Update按钮后，可以看到数据变化后，视图内容也一起更新了：
3. reactive 可以用在深层对象或数组吗？
答案是可以的，reactive是基于 ES2015 Proxy API 实现的，它的响应式是整个对象的所有嵌套层级。
下面以分别以对象和数组作为参数演示：
import { reactive } from'vue'letreactiveDeepObj=reactive({ user: {name : 'Chris1993'} }); letsetReactiveDeepObj= () => { reactiveDeepObj.user.name='Hello Chris1993'; } letreactiveDeepArr=reactive(['a', ['a1', 'a2', 'a3'], 'c', 'd']); letsetReactiveDeepArr= () => { reactiveDeepArr[1][1] ='Hello Chris1993'; }
模版内容如下：
<template><h2>Vue3 reactive deep API Base</h2><div> Object:<span@click="setReactiveDeepObj">Update</span></div><div> Array:<span@click="setReactiveDeepArr">Update</span></div></template>
此时页面展示如下：
当我们分别点击 Update按钮后，可以看到数据变化后，视图上内容也一起更新了：
4. reactive 返回值和源对象相等吗？
答案是不相等的，因为reactive是基于 ES2015 Proxy API 实现的，返回结果是个 proxy 对象。
测试代码：
letreactiveSource= { name: 'Chris1993' }; letreactiveData=reactive(reactiveSource); console.log(reactiveSource===reactiveData); // falseconsole.log(reactiveSource); // {name: 'Chris1993'}console.log(reactiveData); // Reactive<{name: 'Chris1993'}>
5. TypeScript 如何写 ref 和 reactive 参数类型？
在使用 TypeScript 写 ref / reactive 参数类型时，可以根据 ref / reactive 接口类型来实现具体的类型：
functionref<T>(value: T): Ref<T>functionreactive<Textendsobject>(target: T): UnwrapNestedRefs<T>
将前面实例代码改造一下：
import { ref } from'vue'letrefValue=ref<string>('Chris1993'); // refValue 类型为： Ref<string>letsetRefValue= () => { refValue.value='Hello Chris1993'; // ok!refValue.value=1993; // error!} // reactive也类似letreactiveValue=reactive<{name: string}>({name: 'Chris1993'});
6. 把 ref 值作为 reactive 参数会怎么样？
当我们已有一个 ref对象，需要使用在 reactive对象中，会发生什么呢？
假设：
letname=ref('Chris1993'); letnameReactive=reactive({name})
我们可以做下列操作：
letname=ref('Chris1993'); letnameReactive=reactive({name}) console.log(name.value===nameReactive.name); // truename.value='Hello Chris1993'; console.log(name.value); // Hello Chris1993console.log(nameReactive.name); // Hello Chris1993nameReactive.name='Hi Chris1993'; console.log(name.value); // Hi Chris1993console.log(nameReactive.name); // Hi Chris1993
这是因为 reactive将会对所有深层的 refs进行解包，并且保持 ref的响应式。
当通过赋值方式将 ref分配给 reactive属性时，ref也会自动被解包：
letname=ref('Chris1993'); letnameReactive=reactive({}) nameReactive.name=name; console.log(name.value); // Chris1993console.log(nameReactive.name); // Chris1993console.log(name.value===nameReactive.name); // true
7. 总结
本文主要从入门角度和大家介绍reactive/ ref两个 API 的使用方式区别，还有使用过程中的几个问题。
简单总结一下：
reactive一般用于对象/数组类型的数据，都不需要使用.value；ref一般用于基础数据类型的数据，在 JS 中读取和修改时，需要使用.value，在模版中使用时则不需要；reactive可以修改深层属性值，并保持响应；reactive返回值和源对象不同；reactive的属性值可以是ref值；ref本质也是reactive，ref(obj)等价于reactive({value: obj})。
下一篇将和大家分享精通篇，欢迎大家期待。
