转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
原文参考：https://www.sitepoint.com/vue…

在上节中咱们对Vue2和Vue3中的响应式零碎做了比照，带大家理解了响应式零碎的工作原理，明天咱们来进一步摸索Vue3中的响应式零碎API，为了让大家更好的了解和学习，将办法分组进行演绎。

根本办法

第一组

包含控制数据响应的最根本办法

• ref承受一个原始值或一个一般对象，而后返回一个响应且可变的ref对象。ref对象只有一个value指向原始值或纯对象的属性。
• reactive接管一个对象并返回该对象的反馈性正本，该内容会影响所有嵌套属性。
• readonly承受一个ref或一个对象（plain 或reactive），并将一个只读对象返回给原始对象，且会影响所有嵌套属性。
• markRaw 返回对象自身，并避免将其转换为代理对象。

理论应用：

在此示例中，咱们摸索了四种根本响应式办法的应用。

1.创立一个counterref对象，其值为0。而后在视图中搁置两个按钮，用于减少和缩小计数器的值。当应用发现计数器没有作用。

2.其次创立一个person响应对象。在视图中搁置两个输出控件，别离用于编辑一个人的name和一个人的age。当咱们编辑人员的属性时会立刻更新。

3.创立一个math只读对象。而后在视图中设置一个按钮，用于将math的PI属性值加倍。该对象只可读，不可批改。

4.创立一个alphabetNumbers对象，将其标记为raw。取其前三位内容。设置一个按钮，将Bproperty的值更改为3。咱们会发现能够批改对象，但不会导致视图从新渲染。

markRaw 办法非常适合咱们不须要响应的对象，例如一长串国家/地区代码，色彩名称及其对应的十六进制数字，等等。

5.测试和确定咱们创立的每个对象的类型，应用onMounted()的生命周期钩子（lifecycle hook）触发这些查看。

类型查看办法

该组蕴含上述所有四个类型查看器：

• isRef 查看值是否是援用对象
• isReactive查看对象是是由reactive创立还是readonly通过包装由创立的另一个代理而创立的反馈代理reactive
• isReadonly查看对象是否是由创立的只读代理readonly
• isProxy查看对象是否是由reactive或创立的代理readonly

更多参考办法

该组蕴含其余援用办法：

• unref 返回援用的值
• triggerRef执行与shallowRef手动相干的任何成果
• customRef 创立具备自定义援用的显式控件，并对其依赖项跟踪进行显式管制并更新触发

浅层办法

该组中的办法是ref，reactivity和readonly：

• shallowRef创立一个ref，该ref仅跟踪其value属性而不会使其值具备响应性
• shallowReactive 创立一个响应式代理，该代理仅跟踪其本身的属性（不包含嵌套对象）
• shallowReadonly 创立一个只读代理，该代理仅使本人的属性变为只读（不包含嵌套对象）

通过以下示例来感触这些办法的应用：

本示例从创立settings浅援用对象开始，在视图中增加两个输出控件以编辑其width和height属性。但该属性却不能批改，为了解决这个问题，增加一个按钮，该按钮能够更改整个对象及其所有属性。

接着创立一个settingsA浅层反应式代理，蕴含width和height属性，和带有x和y属性的嵌套对象coords。在视图中为每个属性设置一个输出控件。批改width和height属性时，有响应更新，然而批改x和y属性时却没有变动。

最初创立一个settingsB浅层只读对象，属性与settingsA雷同。但此处widthorheight属性只可读，不能批改，x和y属性能够失常批改。

最初两个示例中的嵌套对象coords均不受转换的影响, Vue不会跟踪它的任何批改，能够自在批改。

转换形式

接下来的三种办法用于将代理转换为ref或一般对象：

• toRef为源响应对象上的属性创立一个援用。援用将响应性连贯放弃到其源属性。
• toRefs将响应对象转换为一般对象。一般对象的每个属性都是一个指向原始对象相应属性的ref。
• toRaw返回areactive或readonlyproxy的原始对象。

在上面的示例中，将展现这些转换是如何工作：

在此示例中
1.创立一个根底person反馈对象，并将其用作源对象。

2.将name property转换为具备雷同名称的ref。在视图中增加两个输出控件-一个用于name援用，另一个用于nameproperty。当其中一个被批改，另一个也会更新。

3.将其中一个人所有属性转换为personDetails对象中蕴含的各个援用。在视图中再次增加两个输出控件以测试刚刚创立的援用之一。发现personDetailsage与人的age属性齐全同步。

4.将person响应性对象转换为rawPerson一般对象。在视图中增加一个输出控件以编辑rawPerson的hobby属性，Vue并不进行跟踪。

计算和监督办法

最初一组办法用于计算简单值并监控某些值：

• computed 以getter函数作为参数，并返回一个不变的响应式ref对象。
• watchEffect 立刻运行一个函数，并以响应形式跟踪其依赖关系，并在依赖关系产生更改时从新运行它。
• watch与Options API this.$watch和相应的watch选项齐全等效。它监督特定的数据源，并在监督的源产生更改时在回调函数中施加副作用。

咱们持续看看以下示例：

在此示例中，咱们创立了一个fullName计算变量，该变量的计算基于firstName和lastName。在视图中增加了两个输出控件，用于编辑全名的两个局部。批改任何局部fullName都会从新计算并更新后果。

接下来，咱们创立一个volumeref并为其设置观看成果，每次volume批改后都将运行回调函数。为了验证流程是否这样，咱们在视图中增加一个按钮，该按钮将音量增加一倍。接着在回调函数中设置一个条件，以测试该音量的值是否能够分为分成三份，当它返回true时，将显示一条警报音讯。

最初，咱们创立一个stateref并设置一个watch函数来跟踪它的更改。state扭转执行函数。此外咱们增加了一个按钮，用于在playing和paused之间切换状态。状态产生切换，则有提醒。

watchEffect与watch一些区别：

• watchEffect将回调函数中蕴含的所有响应性属性视为依赖项。因而，如果回调蕴含三个属性，则会隐式跟踪所有属性的更改。
• watch仅跟踪咱们作为回调参数蕴含的属性。此外，它还提供了watched属性的先前值和以后值。

咱们会发现，Vue 3响应式API为各种用例提供了许多办法，API内容很多，在本教程中咱们仅探讨了基础知识。无关更深刻的摸索，详细信息和边缘案例，请拜访Reactivity API文档。

论断

在本文中，咱们介绍了什么是响应零碎以及如何在Vue 2和Vue 3中实现该零碎。一些Vue 2具的缺点曾经在Vue3中被很好的解决。最初让咱们总结一下Vue3响应式零碎的优缺点。

益处

• 能够用作独立程序包。例如，您能够将其与React一起应用
• 凭借其功能丰富的API，能够实现很多性能，灵活性很高
• 反对更多的数据结构（Map，WeakMap，Set，WeakSet）
• 具备更好的性能，仅使所需的数据具备响应性

• 解决了Vue 2中的数据操作正告

  毛病

• 仅实用于反对ES6 +的浏览器
• 在比拟（===）方面，响应式代理不等于原始对象
• 与Vue 2“主动”反馈性相比，须要更多的代码