## 源码解析 http://hcysun.me/vue-design/art/1start-learn.html ## [MVVM实现双向绑定](https://www.kancloud.cn/sxlcjqq/interviews/768359)   已经了解到vue是通过数据劫持的方式来做数据绑定的， 其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持， 达到监听数据变动的目的 [剖析Vue原理&实现双向绑定MVVM](https://segmentfault.com/a/1190000006599500) ## 虚拟DOM 虚拟dom就是解决这个问题的一个思路，到底什么是虚拟dom呢？ 通俗易懂的来说就是用一个简单的对象去代替复杂的dom对象。 举个简单的例子，我们在体里插入一个类为一个DIV的。 var mydiv = document。createElement（' div '）; mydiv。className = ' a ' ; document.body.appendChild（mydiv）; 对于这个DIV可以我们用一个简单的对象mydivVirtual代表它， 它存储了对应DOM的一些重要参数，在改变DOM之前， 会先比较相应虚拟DOM的数据，如果需要改变，才会将改变应用到真实的DOM上。 //伪代码 var mydivVirtual = { tagName ： ' DIV '， className ： ' a ' }; var newmydivVirtual = { tagName ： ' DIV '， className ： ' b ' } if（mydivVirtual.tagName ！== newmydivVirtual.tagName || mydivVirtual.className !== newmydivVirtual.className）{ change（mydiv） } //会执行相应的修改mydiv.className ='b'; //最后<div class ='b'> </ div> 很多时候手工优化dom确实会比virtual dom效率高，对于比较简单的dom结构用手工优化没有问题， 但当页面结构很庞大，结构很复杂时，手工优化会花去大量时间，而且还维护性也不高， 不能保证每个人都有手工优化的能力。至此，虚拟DOM的解决方案应运而生，虚拟DOM很多时候都不是最优的操作， 但它具有普适性，在效率，可维护性之间达平衡。 虚拟dom另一个重大意义就是提供一个中间层，js去写ui，ios安卓之类的负责渲染，就像reactNative一样。 ### Diff算法 ：差异的过程就是调用补丁函数，就像打补丁一样修改真实DOM。