前端必读： Vue 响应式系统大 PK（下）

[GrapeCityChina]

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

在上节中我们对 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“自动”反应性相比，需要更多的代码