浅谈vue 之双向绑定和响应式（vue的响应式）

初识vue小伙伴通常都会被他的双向绑定所感叹，神奇？方便？而且在不少的面试中也会被面试官问到，上来就是：请问vue双向绑定的原来是什么？我们就来研究研究这是个什么东西：

v-model

官方其实已经说这玩意是个语法糖，主要就是监听和更新。换个名字：订阅和发布来进行数据劫持。

那么OK，咱们就先从监听开始，为了显得牛逼的一点或者专业一点，我们可以把他叫做变化侦测。通常我们要知道一个东西他变没变不外乎就两种方式，要么你跑过去看一下，要么那玩意自己跑过来告诉你。

在vue中就采用了后者，个人认为确实更靠谱。举个不靠谱的例子。

因为假设你在学校被人揍了，你爸肯定会知道（当然bug选手除外），这时候你爸一看不乐意了啊。肯定要为你打抱不平啊，那么摆在他面前的记忆两条路，第一：你告诉他事情的来龙去脉，然后他去揍那个揍你的小破孩（推）；第二：他直接去揍，但是又不知道是谁走了你，于是他就跑去把所有学生找出来，看看那些小破孩不太正常（做错了事，都会露出马脚），然后去揍（拉）。显然你自己说要好且合适些。而vue就好比你自己告诉你爸（推）。

那么他具体是怎么做的呢？

js里有这么个玩意：Object.defineProperty。通过这个方法可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。通常可以这么去使用它

Object.defineProperty(obj, prop, descriptor)

Object拿来干什么，存取东西啊，不难想到key:value。于是就有了添加setter 和 getter 用来设置和获取。

        

所有是不是就有了入口，再发散一下，在这个get 和 set 里去做一些事情是不是就相当于完成了一次变化的侦测。

于是我们可以做到一个简易的双向绑定（当然，我这里就没有用方法封装调用了，能懂意思就行）

运行（为什么不是gif?想啥呢多麻烦，自己c回去运行呗！）

 

然而到这里并没有结束，我们只是完成了vue的响应式中的监听，或者就说叫追踪到了变化，刚刚说了还有订阅还没做呢。

想一下平时订报纸，是不是给邮局打电话，说有新的报纸了就给我来一份，有了新的报纸邮局就给你打电话问你要不要等等，但是邮局肯定不是为你一个订啊，当然会有很多人，而邮局做的这个事情就是vue的手机依赖。显然订报纸的这需求就是依赖本身了（真的是这样吗），那么现在就是邮局在收集订阅报纸的人的这么一个需求，而这些需求最终都到了邮局手里。这个邮局就是vue的dep数组，用来储存依赖得到地方。

回到代码里面vue正是把这个过程干成一个类，来专门管理这些事物。要知道社会上什么样的人都有，我们说人就是依赖。同样的，依赖这玩意也是各种各样的，它可能是某个大冤种写的一个watch，也可能是一个模板。正是因为这些依赖又多又乱，所有我们抽象出一个集中处理各种情况的类出来，然后我们收集的时候也只收集这个类的实例，通知也只通知它，然后他自己再去通知其他的，是不是就很方便呢，我们就管他叫watcher。然后再捋一下，vue实际上收集了啥。就是收集了这个watcher，于是就有了熟悉的

回到vue中来捋一下：

Object.defineProperty将属性转为getter/setter 来追踪，读取触发getter 修改触发setter ，在getter中收集有哪些依赖使用了数据，当修改室触发setter是去通知getter中的依赖数据发生了变化，收集的依赖我们存在dep（邮局）中，它来负责收集，删除，和通知依赖。

那么vue其实就是在实例化的时候会去遍历所有的属性创建一个Observer类，Observer类给这些属性添加get和set方法。当外界读取数据的时候就需要走这个getter，于是乎就被收集了起来，当数据变了就去通知这个收集依赖的dep，然后通知到watcher，然watcher就会去通知刚刚读取数据的数据又变了。就引起了视图的更新或者某个回调函数的执行。

就好比你怀疑你老婆搞外遇了，但是为了夫妻感情，你有不能直接出面，万一他没有呢对吧，于是乎，你就找到了你的朋友，让他帮忙盯着你老婆。然后你朋友就把你的电话单独存起来，就帮你盯着你老婆，有一天他发现你老婆去了别的男人家里，你朋友就赶紧来通知你，给你讲你老婆在外面乱搞了。然后你提着你40米大刀一边哭，一遍跑去那个男人家里。

不难看出，你找你朋友这个过程，就相当于取了数据，而你朋友把你的电话存在特殊的电话本里，这个电话本就是dep，而你的朋友显然就是这个watcher了，你的老婆就是这个数据。你取数据产生了依赖被记录再来dep中，你老婆变了触发了setter 给你朋友，你朋友马上通知你说你老婆变了，然后你哭了视图更新了，你提着刀去砍那个男的，走了回调。

这！就是vue的响应式！！

有不当之处欢迎各位大牛指正，一起学习。