vue响应式

数据变化，页面要跟着进行变化，这就是Vue的响应式。

我们先来讲个故事，一个叫做的将军率领军队行军作战多年，深知军队中每一个士兵都是十分重要的，于是他想了解每个士兵的状态和行动，于是他建立了一个监视团，团长，团长的任务就是负责给将军汇报士兵们的状态信息，这个团长啊，有两个非常神器的手下，这两个能够和老鼠沟通并控制老鼠，于是两个手下就分别安排老鼠们监视去监视每个士兵，每个士兵对应两只老鼠，一只负责持续监视，一只当士兵出现状况时负责通知团长的手下。这天一个非常勇猛的士兵生病挂了，于是两只老鼠中负责通知的那只就去通知团长的手下，说有个士兵挂了，团长的手下就汇报给团长，团长听了，急忙和将军汇报，将军知道后很伤心，于是给那位士兵安排了后事。  好，这个非常垃圾的故事讲到这就结束了。

接下来我们讲一下vue的响应式的大概流程：先对data数据进行遍历，给每个data数据添加上getter和setter方法，getter负责读取数据，setter负责派发数据更新的消息，Dep有两个方法，addsub和notify，addsub负责收集调用getter，notify负责收集调用setter，当数据发生改变时，setter通知Dep数据发生了改变，Dep通知watcher调用updata对用到这个数据的地方进行渲染更新，于是就实现了Vue的响应式。

然后，我们针对这篇故事进行分析：团长是Dep负责监视士兵，两个手下是addsub和notify，两个人控制的老鼠对应getter和setter，将军是watcher。

老鼠getter和老鼠setter负责监视数据（data），当数据改变，老鼠setter通知到团长Dep,团长Dep汇报给将军watcher将军watcher针对士兵的死（数据的变化），给士兵安排后事（对页面进行更新渲染）。

当然这个故事不是很对的上，因为watcher能有很多，而Dep只有一个，所以你可以将这个故事的将军理解为小队队长。

本篇文章为博主参考多篇博客根据自己的理解而产生，若有不恰当之处，欢迎各位指点。

附个人认为最佳博客：https://juejin.cn/post/6953172593067180040#heading