一、传统前端数据交互

在传统中，前端页面显示的数据，是通过ajax异步获取到后台的数据，接着进行DOM操作将数据渲染。假设前端交互要改变数据时，又要再来一次上述步骤，而手动操作DOM是一个繁琐的过程且易出错。

二、Vue核心思想之数据驱动

Vue是一个提供了MVVM风格的双向数据绑定的Javascript库，专注于View 层。它让开发者省去了操作DOM的过程，只需要改变数据即可。
在后台获取到的数据，即是Model。Vue会通过Dircetives指令，对DOM做一层封装，当数据发生改变会通知指令去修改对应的DOM，数据驱动DOM变化，DOM是数据的一种自然映射(绿色箭头方向)。
Vue还会对操作进行监听，当视图发生改变时，vue监听到这些变化，从而改变数据，这样就形成了数据的双向绑定(蓝色箭头方向)。
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

三、数据响应原理

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data选项(图中就是a对象中的b属性，即a.b)，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter方法。[Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因]。 用户看不到 getter/setter方法，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
同时Vue会对模板进行编译，解析之后会生成指令对象，也例如 v-text, v-hide等。
当指令中v-text='a.b'时，其实就是触发getter方法，获取对应的数据。

另外每个属性都对应有一个Watcher，它有什么作用？
当data选项中a.b值发生改变时，就会触发setter方法，会通知到对应的watcher。之后再通知指令去调用update方法，由于指令是DOM的封装，所在在update时其实就是调用了原生javascript的DOM方法来更新界面。

四、Vue核心思想之组件化

组件化就是实现了扩展HTML元素，封装可用的代码，提高代码的复用性。
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

• 组件说明

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

• 组件树
  每个组件都会对应一个ViewModel，最终就会生成一个ViewModel树，其实和DOM节点树是一一对应的。