Vue 3.0 响应性 深入响应性原理

vicky.yu

现在是时候深入了！Vue 最独特的特性之一，是其非侵入性的响应性系统。数据模型是被代理的 JavaScript 对象。而当你修改它们时，视图会进行更新。这让状态管理非常简单直观，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下 Vue 响应性系统的底层的细节。

在 Vue Mastery 上免费观看关于深入响应性原理的视频。

#什么是响应性
这个术语在程序设计中经常被提及，但这是什么意思呢？响应性是一种允许我们以声明式的方式去适应变化的一种编程范例。人们通常展示的典型例子，是一份 excel 电子表格 (一个非常好的例子)。

点击此处看视频

如果将数字 2 放在第一个单元格中，将数字 3 放在第二个单元格中并要求提供 SUM，则电子表格会将其计算出来给你。不要惊奇，同时，如果你更新第一个数字，SUM 也会自动更新。

JavaScript 通常不是这样工作的——如果我们想用 JavaScript 编写类似的内容：

var val1 = 2
var val2 = 3
var sum = val1 + val2
// sum
// 5
val1 = 3
// sum
// 5
如果我们更新第一个值，sum 不会被修改。

那么我们如何用 JavaScript 实现这一点呢？

检测其中某一个值是否发生变化
用跟踪 (track) 函数修改值
用触发 (trigger) 函数更新为最新的值