由 model、view、viewmodel 三部分构成，由mvc衍生。
model： 层代表数据模型，也可以在model中定义数据修改和操作的业务逻辑，
view： 代表ui 组件，它负责将数据模型转化成ui 展现出来，
viewmodel： 是一个同步view 和 model的对象。
在mvvm架构下，view 和 model 之间并没有直接的联系，而是通过viewmodel进行交互，model 和 viewmodel 之间的交互是双向的， 因此view 数据的变化会同步到model中，而model 数据的变化也会立即反应到view 上。 （注意）
viewmodel 通过双向数据绑定把 view 层和 model 层连接了起来，而view 和 model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作dom， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 mvvm 来统一管理。
vue.js 可以说是mvvm 架构的最佳实践，专注于 mvvm 中的 viewmodel，不仅做到了数据双向绑定，而且也是一款相对来比较轻量级的js 库，api 简洁，很容易上手。
vue.js 是采用 object.defineproperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。当把一个普通 javascript 对象传给 vue 实例来作为它的 data 选项时，vue 将遍历它的属性，用 object.defineproperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 vue 追踪依赖，在属性被访问和修改时通知变化。（注意：据悉vue3.0将采用proxy替代object.defineproperty）
图的解析：
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 中的 getter 方法被触发（注意这里触发什么），getter 会立即调用dep.notify()，dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。同理当表单输入内容发生变化时， 就会触发setter,watcher监听机制就会执行， watcher通知vue生成新的vdom树，再通过render函数进行渲染,生成真实dom 。
通过 object.defineproperty 实现见简单的双向数据绑定：
我要评论<body>
<div id="demo"></div>
<input type="text" id="inp">
</body>
<script>
let obj = {};
let demo = document.queryselector('#demo');
let inp = document.queryselector('#inp');
object.defineproperty(obj,'name',{
get : () => {
return inp.value;
},
set : (newval) => {//当该属性被赋值的时候触发
inp.value = newval;
demo.innerhtml = newval;
}
});
inp.addeventlistener('input',(e) => {
// 给obj的name属性赋值，进而触发该属性的set方法
obj.name = e.target.value;
})
obj.name = 'huqinggui';//在给obj设置name属性的时候，触发了set这个方法
</script>
替换不是因为不好，是因为有更好的方法使用效率更高
如对本文有疑问， 点击进行留言回复！！
JavaScript 好题汇总分享（持续更新，看到好题就写）
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论