如何用js手动实现一个数据双向绑定

双向数据绑定：

我们这里拿vue举例，vue中的双向数据绑定主要是利用Object.defineProperty（）这个方法进行数据劫持，进而实现双向数据绑定，我们先来看一幅图：

a.png

我们手动实现一个简易的双向数据绑定

效果：

1585710196165.gif

我们可以看到，以上代码中对数据操作的主要是Object.defineProperty这个方法中的get和set方法。

MVVM

相应大家有工作经验的朋友都知道原来主要的用架构模式都是MVC或者MVP模式，在功能逐渐增多的情况下，Controller的工作量大大的增加，已经变的不易维护，使得无数的开发者头疼，直到MVVM模式的框架出现，极大的减轻了开发者的工作量，深受喜爱，它的核心功能就是双向数据绑定，因为这一特性得到广泛应用。

MVVM.png

MVVM设计模式：

5af2bcdd0001ccfd19201080.jpg

运行概述：Observer会实时监听data中的数据变化，Observer背后其实还是Object.defineProperty,当data中的数据变化时会触发Object.defineProperty中的set函数，set会执行对观察者列表Dep（由被观察的对象组成）的触发，Dep中的列表页是由Watcher添加的，Dep得到通知后会执行更新函数，也就是Watcher给的回调函数，Watcher根据回调函数拿到的更新数据，就可以去更新View了。