Vue源码解析：如何运用数据响应系统？

本文共计7669个文字，预计阅读时间需要31分钟。

接下来重点来看Vue的数据响应系统。许多文章在介绍数据响应时，首先用一个简单的例子介绍了数据双向绑定的思路，然后再深入源码分析。我也借鉴了这种做法，感觉这样更利于理解。

接下来重点来看Vue的数据响应系统。我看很多文章在讲数据响应的时候先用一个简单的例子介绍了数据双向绑定的思路，然后再看源码。这里也借鉴了这种方式，感觉这样的确更有利于理解。

数据双向绑定的思路

1. 对象

先来看元素是对象的情况。假设我们有一个对象和一个监测方法：

const data = { a: 1 }; /** * exp[String, Function]: 被观测的字段 * fn[Function]: 被观测对象改变后执行的方法 */ function watch (exp, fn) { }

我们可以调用watch方法，当a的值改变后打印一句话：

watch('a', () => { console.log('a 改变了') })

要实现这个功能，我们首先要能知道属性a被修改了。