【Vue】MVVM和双向绑定的底层原理简洁版总结

一、先要了解一个概念，MVVM是什么？

MVVM ：
M：数据模型层 ，负责数据处理。
V：视图层，显示视图。
VM：视图模型层，涉及到双向绑定。
输入框变-data变。view=>data
data变-节点变。data=>view

二、双向绑定底层原理总结：

方式：通过数据劫持Object.defineProperty和发布订阅模式实现。
这里涉及到一个名词，数据劫持是什么？一句话来说：给数据添加监听，一旦发生变化，就执修改视图操作的过程。

简洁版总结①：通过Object.defineProperty监听数据发生变化，然后通知订阅者（watcher），订阅者触发响应的回调。

补充简洁版总结②：通过监听器 Observer-用Obeject.defineProperty()来监听属性变动，通过订阅器Dep来告知订阅者，订阅者Dep就是订阅监听器变化，当变化时触发解析器compile中的更新函数。

补充版总结③：vue源码中有一个核心方法叫 defineReactive() ，把没侦测转为侦测的。具体逻辑：通过监听器 Observer-用Obeject.defineProperty()数据劫持，会劫持到每一个状态数据，遍历对象，给每个属性加setter，getter。这样如果我们赋值，setter就会监听到。同时创建订阅器Dep，再给每个依赖者添加一个订阅者watcher。这样，当数据发生变化时，会触发对应的setter，从而Dep会发布通知，通知每一个订阅者watcher，然后watcher更新对应的数据。也就是触发解析器compile中的更新函数。

具体步骤：
1、实现一个监听器 Observer-用Obeject.defineProperty()来监听属性变动。（用Object.defineProperty() 对属性都加上 setter 和 getter。这样如果我们赋值发生变动，就会触发setter，我们就会监听到）
2、实现一个解析器 Compile-解析 Vue 模板指令，绑定更新函数，添加监听数据的订阅者，一旦数据有变动，调用更新函数进行数据更新。
3、实现订阅者Watcher-订阅Observe的属性变化，当变化，触发解析器 Compile 中对应的更新函数。
4、实现订阅器Dep-当变化时告知订阅者-用来收集订阅者，对监听器和订阅者进行统一管理。

附上在网上找的一张图，感觉非常清晰，供大家参考：