从vue说起
vue相信大家都很熟悉，如何使用，本人就不在这里演示了，相信这个都比我熟，今天我们来说说vue的mvvm原理，比较代码简单实现。下面简单了解一下 Vue.js 关于双向绑定的一些实现细节：
vue.png
Observer 数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，内部采用Object.defineProperty的getter和setter来实现。
Compile 指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
Watcher 订阅者， 作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。
Dep 消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发notify 函数，再调用订阅者的 update 方法。
从图中可以看出，当执行 new Vue() 时，Vue 就进入了初始化阶段，一方面Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能；另一方面，Vue 的指令编译器Compile 对元素节点的指令进行扫描和解析，初始化视图，并订阅Watcher 来更新视图， 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。
当数据发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。我们需要实现的也是上面的大概功能，来来来，废话不说，马上开路
defineproperty 是 啥 ？！
相信大家都指现在无论是React还是Vue还是最新的Angular，其实实现方式都更相近了
那就是通过数据劫持+发布订阅模式
真正实现其实靠的也是ES5中提供的Object.defineProperty，当然这是不兼容的所以Vue等只支持IE8+
下面我们简单说说它的使用：
defineproperty 是 啥 ？！
还你mvvm原理简单实现
数据劫持
为什么要这样做呢，目的就是观察对象，给对象增加Object.defineProperty
vue特点是不能新增不存在的属性 不存在的属性没有get和set
数据代理
其实就是更加美观直接、优雅，好处多多哦
数据编译
把拿到的{{}}里面的代码编译出来解析
发布订阅
数据更新视图
双向数据绑定（面试常问哦~）
大纲已出，明天细敲！！
网友评论