用本身的话总结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双向数据绑定原理的问题，可以对答如流，答得尽可能完整一点，若是我还有哪些地方漏了的，请在评论区指出，相互借鉴学习！