转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，为开发者赋能。原文参考：https://www.sitepoint.com/vue...上一节我们对比了Vue2和Vue3中的响应式系统，让大家了解响应式系统的工作原理。今天我们将进一步探索Vue3中的响应式系统API。为了让大家更好的理解和学习，对方法进行了归纳总结。第一组基本方法包括控制数据响应的最基本方法。ref接受原始值或普通对象，然后返回响应式和可变的ref对象。ref对象只有一个属性，其值指向原始值或普通对象。reactive接受一个对象并返回该对象的一个??反应副本，这会影响所有嵌套属性。readonly接受一个ref或一个对象（普通或反应式）并将只读对象返回给原始对象，影响所有嵌套属性。markRaw返回对象本身并防止它被转换为代理对象。实际使用：在这个例子中，我们探索四种基本反应式方法的使用。1.创建一个值为0的counterref对象，然后在视图中放置两个按钮来增加和减少计数器的值。使用时，found计数器无效。2.接下来，创建一个人员响应对象。在视图中放置两个输入控件，分别用来编辑一个人的名字和一个人的年龄。当我们编辑一个人的属性时，它会立即更新。3.创建一个数学只读对象。然后在视图中设置一个按钮，使数学的PI属性的值加倍。该对象仅可读，不可修改。4.创建一个alphabetNumbers对象并将其标记为原始的。取前三位数字。设置一个按钮，将B属性的值更改为3。我们会发现可以修改对象而不会导致视图重新呈现。markRaw方法非常适合我们不需要响应的对象，例如一长串国家代码、颜色名称及其对应的十六进制数等。5.测试并确定我们创建的每个对象的类型，使用onMounted()生命周期挂钩来触发这些检查。类型检查方法该组包含上述所有四种类型检查器：isRef检查该值是否为引用对象由Read-onlyproxies创建createdreadonlyisProxy检查对象是否是由reactive或readonly更多引用方法创建的代理该组包含其他引用方法：unref返回引用的值具有自定义引用样式控件，并对其依赖项跟踪和更新触发浅层方法有显式控制这组方法是ref、reactivity和readonly：shallowRef创建一个只跟踪其值属性而不使其值具有ReactiveshallowReactive的ref创建一个只跟踪其o的反应式代理wn属性（不包括嵌套对象）shallowReadonly创建一个只读代理，只使自己的属性只读（不包括嵌套对象）通过使用下面的例子来感受这些方法的使用：这个例子从创建一个settingsshallowreference开始对象，并向视图添加两个输入控件以编辑其宽度和高度属性。但是，无法修改此属性。为了解决这个问题，添加一个可以改变整个对象及其所有属性的按钮。然后为settingsA创建一个浅层反应代理，包含宽度和高度属性，以及一个嵌套对象坐标与x和y属性。为视图中的每个属性设置一个输入控件。修改width和height属性时有响应更新，修改x和y属性时没有变化。最后，创建一个settingsB浅层只读对象，其属性与settingsA相同。但是这里的widththorheight属性只是可读的，不能修改，x和y属性可以正常修改。最后两个例子中的嵌套对象坐标不受转换的影响，Vue不跟踪它的任何修改，可以自由修改。转换方法接下来的三个方法用于将代理转换为ref或普通对象：toRef创建对源响应对象属性的引用。引用与其源属性保持反应式连接。toRefs将响应对象转换为普通对象。普通对象的每个属性都是一个指向原始对象相应属性的ref。toRaw返回处于活动状态或只读代理的原始对象。在下面的例子中，我将展示这些转换是如何工作的：在这个例子中1.创建一个基本的person反应对象并将它用作源对象。2.将name属性转换为同名的ref。向视图添加两个输入控件-一个用于名称引用，一个用于名称属性。当一个被修改时，另一个也被更新。3.将一个人的所有属性转换为包含在personDetails对象中的单独引用。将另外两个输入控件添加到视图以测试刚刚创建的引用之一。发现personDetailsage与人物的年龄属性完全同步。4.将person响应对象转换为rawPerson普通对象。向视图添加一个输入控件以编辑rawPerson的hobby属性，Vue不会跟踪它。Computed和Watched方法最后一组方法用于计算复杂值并监视某些值：computed将getter函数作为参数并返回一个不可变的反应式ref对象。watchEffect立即运行一个函数并反应性地跟踪它的依赖关系并在依赖关系发生变化时重新运行它。watch完全等同于OptionsAPIthis.$watch和相应的watch选项。它监视特定的数据源，并在监视的源发生变化时在回调函数中施加副作用。让我们继续看下面的例子：在这个例子中，我们创建了一个fullName计算变量，它是根据firstName和lastName计算的。视图中添加了两个输入控件，用于编辑全名的两个部分。修改fullName的任何部分都会重新计算并更新结果。接下来，我们创建一个volumeref并在其上设置观看效果，每次修改音量时都会运行回调函数。为了验证这是流程，我们在视图中添加了一个按钮，使音量加倍。然后在回调函数中设置条件，测试音量的值是否可以三等分，当返回true时，会显示提示信息。最后，我们创建一个stateref并设置一个watch函数来跟踪对其的更改。状态改变执行函数。此外，我们添加了一个按钮来切换播放和暂停之间的状态。如果状态切换，会有提示。watchEffect和watch之间有一些区别：watchEffect将回调函数中包含的所有响应属性视为依赖项。因此，如果回调包含三个属性，则会隐式跟踪对所有属性的更改。watch只跟踪我们作为回调参数包含的属性。此外，它还提供了被监视属性的先前和当前值。我们会发现，Vue3ReactiveAPI为各种用例提供??了许多方法，API非常丰富，在本教程中我们只探讨了基础知识。如需更深入的探索、详细信息和边缘案例，请访问ReactivityAPI文档。结论在本文中，我们介绍了什么是响应式系统以及如何在Vue2和Vue3中实现它。Vue2的一些缺陷在Vue3中得到了很好的解决。最后总结一下Vue3响应式系统的优缺点。Benefits可以作为独立包使用。例如，你可以与React一起使用凭借其功能丰富的API，你可以实现非常多的功能，灵活性高支持更多的数据结构（Map,WeakMap,Set,WeakSet），性能更好，只需让所有Requires数据成为reactive解决了Vue2中的数据操作警告ConsOnlyworksinbrowsersthatsupportES6+
