vue双向数据绑定

推荐一个讲解的视频

先说明一下，很多人误认为数据响应和双向绑定是一样的，这不一样，数据响应式指的是数据的变化引起视图的变化，而双向绑定才是数据到视图，视图到数据相互影响。
大致说一下思路，具体代码肯定还是要自己花时间看视频，最好是跟着敲一下代码。Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。
在observe方法中进行数据劫持，Dep类进行收集订阅者，通过addSub方法向数组中添加订阅者实例，在DOM被创建好的时候，订阅者就会被添加进来，同时，Dep类中有一个notify方法，被每当数据变化时（即在set中被劫持到），Dep类中的notify方法通过遍历的方式，通知每一个订阅者（调用他们的update方法）， Watcher类是订阅者类，里面有update方法，在这个方法中触发回调函数的方法即cb方法（cb方法中记录着如何更新自己的内容，在创建Watcher类实例时会被传进来）。会根据最新的数据去渲染dom结构。当同页面上的的内容变化时，通过事件监听的方式更新数据的值。

https://www.bilibili.com/video/BV1Dr4y1c7xS?p=23