Vue.js概念

一个轻量级的mvvm框架，gzip后大小只有20k+
vue.js更容易上手，学习曲线平稳
借鉴了angular的指令和react的组件化

vue的核心思想

• 数据驱动
• 组件化的前端开发

什么是数据驱动

• 数据驱动DOM变化， DOM 是数据的一种自然映射。vue.js里面，只要改变数据，vue.js通过Directive指令，去对DOM做一层封装。当数据发生变化，会通知指令修改对应的DOM。
• 修改视图的时候，vue.js监听到这些变化，从而改变数据

• 通过以上两个步骤实现数据的双向绑定

  
  

数据响应原理

一份数据a.b，在一个vue对象的实例化过程中，会给a,b这份数据通过ES5的Object.defineProperty属性添加了一个getter和setter。同时vue.js会对模板做编译，解析生成一个指令对象，图中就是v-text指令。每一个指令对象都会关联一个watcher，当我们对指令a.b做求值的时候，就会触发他的getter，就会把依赖搜集到watcher里面，当我们再次改变a.b的时候，就会触发他的setter，会通知到对应关联的watcher，watcher会再次对a.b求值，计算对比新旧值，当发现值改变了，watcher就会通知到指令，调用指令的update方法，由于指令是对DOM的封装，所以会调用原生DOM的方法去更新视图，这样我们就完成了数据改变到数据更新的自动过程。

组件化

扩展HTML元素，封装可以重用的代码。
vue.js中，每个组件对应一个vue-model，最终生成的vue-model树和DOM树是一一对应的关系。

组件设计原则

• 页面上每个独立的可视/可交互区域视为一个组件。
• 每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。
• 页面是组件的容器，组件可以嵌套自由组合形成完整的页面。