ref（）和reactive（）之间的主要区别是什么？什么时候使用一个或另一个？让我们一起在文章中找到答案。
1.基元值
ref（）和reactive（）处理不同的基元值：字符串、数字、布尔值、null和undefined。
1.1 ref（）
refs（）存储基元值和对象：
在上面的例子中，ref（0）创建了一个存储基元值的ref。
同样，ref（｛count：0｝）创建了一个存储纯JavaScript对象的ref。
1.2 reactive（）
另一方面，reactive（）不存储基元，而只存储对象：
使用基元值调用reactive（0）是不正确的。如果您需要生成反应基元值，那么ref（0）就是一种方法。
reactive（）只适用于对象的原因是Vue的reactive实现。Vue使用代理截取对象的属性更改。代理不适用于基元。
尽管如此，用对象初始化的reactive（｛count：0｝）是完全有效的，并创建了一个reactive对象。
总结：
ref（）可以存储基元值，而reactive（）不能。
2.访问无功数据
第二个区别是如何访问存储在ref（）和reactive（）中的数据。
2.1 ref（）
ref（）数据，无论是基元值还是对象，都是通过一个特殊属性访问的。value：
numberRef.value是从引用numberRef访问基元值的方式。
＜ref＞.value是所有ref上可用的特殊属性，用于读取或更新ref值。
此外，objectRef.value.count是如何访问引用中对象的属性的。
请注意，在模板内部，您不必使用.value来访问ref值：它们是自动展开的。
在插值｛｛numberRef｝｝中，ref是自动展开的。
2.2 reactive（）
另一方面，reactive（）数据是直接访问的：
访问使用reactive（｛count：0｝）创建的reactive数据不需要额外的语法，而是直接完成的：objectReactive.count。
reactive（originalObject）返回的reactive对象是originalObject的代理对象。这意味着反应对象具有与原始对象相同的属性（也就是具有相同的接口）。
总结：
ref（）数据使用value属性访问（异常：在模板中，ref是自动展开的），而reactive（）数据则直接访问。
3.重新分配数据
ref（）是使用.value属性访问和更新的，而reactive（）是原始对象的代理。因此，ref（）可以重新分配给一个新对象，而reactive（）不能。
ref（）
将ref（）的值完全重新分配为新值是完全有效的：
在挂载后完全替换ref值objectRef.value＝｛count：1｝反映在输出中。保持反应性。
reactive（）
但是，完全重新分配reactive（）对象是不可能的：
安装后完全替换反应对象值objectReactive={count:1}并没有反映在输出中。这样做会破坏objectReactive的反应性。
总结：
ref（）值可以完全重新分配给一个新对象，而reactive（）不能。
4.类型化
ref（）
通过.value属性访问ref数据的一个直接后果是如何键入ref。
要注释引用，您需要使用特殊类型的引用，可从vue库导入：
Ref＜number＞是一种类型，表示持有数字的Ref。
例如，如果要将ref指定为可组合的ref数，请确保使用ref＜V＞类型（其中V是值的类型）来注释refref数：
reactive（）
另一方面，reactive（）返回的reactive数据被类型化为初始对象：
reactive（｛count:0｝）返回类型为｛count:number｝的对象。反应对象通常保持原始对象的类型。
但有一个例外——如果反应对象包含引用，那么这些引用将被展开。
即使反应对象是{count:ref（0）}，返回的类型仍然是{count:number}。这一切都是因为reactive（）会自动打开在reactive对象中找到的refs。
总结：
ref返回的ref（值：T）的类型为ref，而reactive返回的reactive对象（对象：T）为T类型（异常：reactive中的ref被展开）。
5.监视
watch（）监视反应数据的变化。ref（）和reactive（）的watch（）的默认行为不同。
ref（）
watch（）确定ref的.value属性是否已更改：
每次单击“增加”按钮，您都会在控制台中看到消息“已更改！”。watch（count，callback）在每次countNumberRef.value更改时调用callback。
但是watch（）是否监视存储在ref（）中的对象的深层变化？
然而，这一次，如果您单击“增加”按钮，控制台中将不会出现任何消息！结论是watch（）默认情况下不会深入观察refs。
然而，当countObjectRef.value.count发生变化时，DOM仍然会更新：这意味着ref中的对象对于渲染的输出仍然是被动的。
当然，如果你让watch（）深入观察裁判，它的工作原理是完全深入观察：
reactive（）
在监视反应对象的情况下，watch（）始终执行深度监视（即使您没有指示{deep:true}）选项。
每次单击“增加”按钮，您都会在控制台中看到消息“已更改！”。每当countObjectReactive的任何属性（甚至是深层属性）发生变化时，watch（countObjectReactor，callback）都会调用callback。
总结：
watch（）默认情况下只监视ref（）的直接.value更改，同时对reactive（）对象进行深度监视。
6.用途
虽然没有严格的规则，但在某些情况下，使用特定的反应性函数是可取的：
1.如果您需要一个反应基元值，那么使用ref（）是正确的选择。
2.如果您需要一个反应值对象（一个属性通常不变的对象），那么使用ref（）是一个不错的选择。
3.如果您需要一个反应式可变对象，并且希望跟踪该对象的深度变异属性，那么使用reactive（）是一个不错的选择。
7.总结
这篇文章介绍了组合API中ref（）和reactive（）之间的差异：
1.ref（）可以存储基元值，而reactive（）不能。
2.您可以使用.value访问存储在ref（）中的值，而reactive（）对象可以直接用作常规对象。
3.ref（）值可以重新分配给一个全新的对象，而reactive（）不能。
4.ref（）类型为ref＜V＞，而反应对象返回
最后向大家推荐一项实用的内容：使用Vue组合API对项目开发有很大的帮助，但有时很有挑战性。中培IT学院的VUE3.0从实战到源码全剖析技术实战课程中涵盖了reactive、ref的运行原理，主要帮助学员掌握Vue3.0的核心特性，让学员在3天的集中学习中掌握前端工程师的Vue必会技能！
[1] |
