深入响应性原理

终于到了讲解我们 Vue 的响应式原理，前面我们已经讲解了 Map，WeakMap，Set，WeakSet，Proxy，Reflect 这几个知识点。那么接下来思考下到底什么是响应式，就比如我们做一个公司的官网，然后要求必须兼容手机端，ipad 端，电脑端，内容屏幕大小变化而变化，这些就需要依赖 JavaScript，CSS, HTML 去处理了。

那么假如我们像在 Excel 表格中，两个数字相加，如果一个数字变化了，两个数字的和肯定得变化吧，Excel 表格做到了，可定里面是做了很大的处理了，那如果使用 JavaScript 来做，我们该如何做呢？

let var1 = 2let var2 = 3let sum = var1 + var2// 当 var1 变化时，// 该如何通知 sum

如果我们更新第一个值，sum 不会被修改。

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

• 检测其中某一个值是否发生变化

• 用跟踪 (track) 函数修改值

• 用触发 (trigger) 函数更新为最新的值

Vue 如何追踪变化？

在 Vue 中，在将一个对象数据传递给一个组件的时候，