用自己的话总结vue双向绑定数据原理

大家好，我是前端鼓励师maybe，作为前端，掌握vue框架可以说是必须滴，那么vue的双向数据绑定原理想必是要深入了解的一个知识点，那么你了解的双向绑定原理又是怎么样的呢？不管怎样，请给我一首歌的时间，我给你用官方的口吻讲解一波双向绑定的整个过程，剩下的半首歌时间我给你用我自己整理的话讲解一波，希望你看完我的文章，对vue的双向数据绑定原理有跟进一步了解和理解！

vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发响应的监听回调。

具体步骤

第一步：
需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么久能监听到了数据变化

第二步：
compile解析横板令，将模板中的变量替换成数据.然后初始化渲染页面视图，并将每个令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：
Watcher订阅名是 observer和 Compile之间通信的桥梁，主要做的事情是：
1.在自身实例化时往属性订倒器(dep)里面添加自己
2.自身必须有一个 update()方法
3.待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中定的回调，则功成身退

第四步:
MVVM作为数据绑定的入口，合 observer、 Compile和 Watcher三者，通过 Observer来监听自己的model数据変化，通过 Compile来解析编译模板指令，最终利用 Watcher搭起 Observer和 Compile之间的通信标梁，达到数据变化-＞视图更新新:视图交互变化(Input)-＞数据mode变更的双向绑定效果。

以上便是比较官方的口吻讲解vue的双向数据绑定原理，那么接下来，说说我对双向数据绑定原理的理解，要理解vue的双向数据绑定原理那就必须先理解MVC与MVVM模式的区别然后再理解vue的单项数据绑定原理，接下来给大家以图片和文字结合的方式讲解下：

1.MVC和MVVM的区别：

所以从上图可以看出来，MVVM设计模式是自动化的，vue就是采取了这种设计模式，我们可以发现，真正把数据和视图分离开的是MVVM模式，并不是MVC，因为controller当中有大量手工的DOM操作，只要界面改变，你的controller中的代码必须要更改（jquery），比如你可以想象一下，你页面当中元素的位置变了，你的选择器是不是肯定要变，选择器就写在DOM操作里面，这就是MVC和MVVM两种设计模式的区别。

2.vue的单项单项数据绑定原理：

单项绑定过程(自己总结的)：变量变了，由set发通知给watcher，watcher告知虚拟DOM树，叫它该比较了，我这有值变了，于是生成新的dom树进行一个比较，然后逐级分类比较，比较出哪个元素发生变化就把这个元素更新到页面，这就是单项数据绑定原理。

3.vue双向数据绑定原理
vue的双向数据绑定原理，当页面有一个input元素咋办，这时候v-model双向数据绑定就派上用场了，但是v-model双向数据绑定原理又是怎样的呢？请看下图：

v-model原理其实就是给input事件绑定oninput事件就会立刻调用底层对象对应的setter方法改变data里的属性的值从而实现双向数据绑定

经过上面一波骚操作，希望大家能在vue的面试中遇到vue双向数据绑定原理的问题，能够对答如流，答得尽量完整一点，如果我还有哪些地方漏了的，请在评论区指出，相互借鉴学习！