本文深入探讨Vue的响应式系统，解释Watcher作为观察者的作用，其与Dep的相互绑定，以及Observer执行队列机制。讨论了不同类型的Watcher，包括普通、lazy和render，并分析了Vue如何通过设置队列优化性能。此外，文章还阐述了Dep如何通知观察者更新，以及Object.defineProperty的局限性和ES6 Proxy的优势。
引言
在这里我先提出两个问题（文章末尾会进行解答）：
- 在Vue的数据响应系统中，Dep和Watcher各自分担什么任务？
- Vue的数据响应系统的核心是Object.defineproperty一定是最好的吗？有什么弊端和漏洞吗？
一、什么是响应系统中的Watcher，它的作用是什么？
响应系统中的Watcher即这个系统的观察者，它是响应系统中观察者模式的载体，当响应系统中的数据发生改变的时候，它能够知道并且执行相应的函数以达到某种业务逻辑的目的。打个比方，如果你是一个商家，要寄一批货分别给不同的客户，那么watcher就是一个个快递员，发出的动作就是数据发生改变。你只需要负责寄出去这个动作就行了，如何找到、送到客户则是watcher的事情。
每个watcher和数据之间的关系要么是1对1，要么是多对多关系（这与watcher的类型有关），要不是没有联系。watcher和业务逻辑只有1对1关系。
二、Watcher的类型
在Vue源码中是没有体现出Watcher的类型的，我在这里给Watcher添加类型是为了更好地理解Watcher这个对象。Watcher
最低0.47元/天 解锁文章
扫一扫
2103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
