Vue.js的核心思想

数据驱动

DOM树数据的一种自然映射

如果没有使用Vue.js，使用Ajax从后端获取数据，然后手动触发DOM改变，或者通过前端交互改变一些数据，仍然需要手动的触发一些DOM的改变，手动改变DOM不仅是一个繁琐的过程，而且非常容易出错。

使用Vue.js 之后，省去了手动触发DOM的操作，在Vue.js里面，只需要改变数据，Vue.js通过directive指令对DOM进行一层封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM变化，DOM是数据的一种自然映射。Vue.js还会对DOM操作进行监听，当我们修改视图的时候，从而改变数据，从而形成数据的双向绑定。

数据驱动原理

数据（model）是如何驱动视图（view）自动改变

 

我们有一份数据a.b，在Vue对象实例化的过程中，会给a.b这份数据通过ES5的object.defineProperty 属性添加一个getter、setter，

同时，Vue.js 会对模板进行编译，解析生成一个指令对象，这里就是一个v-text指令，每个指令对象会关联一个Watch，当我们在对应的表达式在a.b做求值的时候，就会触发a.b的getter，这里我们会将依赖升级到watch里面，当我们再次改变a.b的时候，会通知到对应管理的watcher，再次对a.b求值，对比新值，当发现值改变了，watcher又会通知到指令，调用指令的update方法，由于指令是对DOM的封装，所以会调用原生DOM的方法去更新时视图，我们就完成了一个数据改变到视图更新的过程。

组件化

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

在Vue.js中，每个组件对应的都是Vue module，最终生成一个module树（图右），它和DOM树就是一个一一对应的关系。

组件的设计原则：

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

每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。（就近维护体现了前端开发的工程化思想，它为开发提供了很好的分治策略，开发者都将清楚地知道自己开发和维护的功能单元，它的代码必将存在对应的组件目录中）。

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