转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
原文参考：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“主动”反馈性相比，须要更多的代码