Vue.js核心思想

        Vue.js核心思想包括2个方面：数据驱动和组件化。

     1. 数据驱动：DOM是数据的一种自然映射（数据驱动DOM变化）

        MVVM框架示意图：Model对应javascript对象，View对应DOM结构，ViewModel将View和Model关联起来。Vue.js通过directive指令对DOM做封装，当数据发生变化，会通过指令修改相应的DOM；Vue.js也会对DOM的操作做监听，然后修改相应数据，这样也就实现了双向绑定。

        数据响应原理：数据改变如何自动驱动视图更新的呢？

       如上图，在Vue实例化的过程中，会遍历实例化对象选项中的data 选项（也就是图中的a.b），遍历其所有属性并使用Object.defineProperty()添加Setter和 Getter，同时vue.js会对模板做编译，解析生成一个指令对象，这里是一个v-text指令。

        每个指令对象都会关联一个Watcher，当我们对指令对应的表达式a.b做求值的时候，就会触发了Getter，这里我们就会把依赖收集到这个Watcher里面，当我再次改变了a.b的时候，就会触发它的Setter，会通知到被关联的Watcher，然后Watcher就会再次对a.b求值，计算对比新旧值。当发现值改变了，Watcher又会通知到指令，调用指令的Updata方法，由于指令是对DOM的封装，所以会调用原生DOM的方法，去更新视图，这样我们就完成了数据改变到视图更新的一个自动过程。

 

2. 组件化：扩展HTML元素，封装可重用的代码

        页面被拆分为一个个小的区块，每个区块对应一个组件，组件相互嵌套就形成了一个完整的页面。在Vue.js中，每一个组件都对应一个ViewModel，生成一个ViewModel树，ViewModel树与DOM树一一对应。

        组件设计原则：

        页面上每个独立的可视 / 可交互区域视为一个组件。

        每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。

        页面是组件的容器，组件可以自由嵌套组合形成完整的页面。