Vue源码中数据响应系统是如何巧妙地应用于长尾词处理和动态数据绑定的？

本文共计7676个文字，预计阅读时间需要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被修改了。