说说Vue响应式系统中的Watcher和Dep的关系-面试进阶

引言

在这里我先提出两个问题（文章末尾会进行解答）：

• 在Vue的数据响应系统中，Dep和Watcher各自分担什么任务？
• Vue的数据响应系统的核心是Object.defineproperty一定是最好的吗？有什么弊端和漏洞吗？

一、什么是响应系统中的Watcher，它的作用是什么？

响应系统中的Watcher即这个系统的观察者，它是响应系统中观察者模式的载体，当响应系统中的数据发生改变的时候，它能够知道并且执行相应的函数以达到某种业务逻辑的目的。打个比方，如果你是一个商家，要寄一批货分别给不同的客户，那么watcher就是一个个快递员，发出的动作就是数据发生改变。你只需要负责寄出去这个动作就行了，如何找到、送到客户则是watcher的事情。

每个watcher和数据之间的关系要么是1对1，要么是多对多关系（这与watcher的类型有关），要不是没有联系。watcher和业务逻辑只有1对1关系。

二、Watcher的类型

在Vue源码中是没有体现出Watcher的类型的，我在这里给Watcher添加类型是为了更好地理解Watcher这个对象。Watcher在普通的业务逻辑上可以分为以下三类：

• 普通的Watcher：与数据1对1关系。
• lazy型Watcher：与数据1对1关系&#