Vue初探

1.Vue.js是什么

• Vue是一个“MVVM框架（库）”，和Angular类似，但相比Angular小巧，比较容易上手。
• Vue是一套用于构建用户界面的渐进式框架，与其他大型框架不同的是，Vue采用自底向上逐层应用。
• Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或者既有项目整合。另一方面，当与现代化的工具链以及各种支持类库使用结合时，Vue也完全能够为复杂的单页应用提供驱动。
• Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

2.Vue对比其他框架

2.1 React

• React和Vue都使用Virtual DOM
• React和Vue都提供了响应式（Reactive）和组件化（Componsable）的视图组件
• React和Vue都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库
• React中所有的组件的渲染功能都依靠JSX，而Vue使用简单的模板，任何合乎规范的HTML都是合法的Vue模板，易于已有应用的迁移
• Vue比React运行更快
• React有比Vue更丰富的生态系统
• 在React应用中，当某个组件的状态发生变化时，会以该组件为根，重新渲染整个组件子树。而在Vue中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重新渲染，没有React的子树问题限制。

2.2 Angular

• Vue在设计之初参考了很多Angular的思想，但在Angular中存在的许多问题，在Vue中已经得到解决
• 在API与设计两方面上，Vue.js都比Angular.js简单的多，因此可快速掌握并投入开发
• Vue相比于Angular要变得小巧很多，运行速度比Angular快，容易优化
• Vue和Angular绑定都可以用{{ }}
• Vue指令用v-xxx，Angular用ng-xxx
• Vue中数据放在data对象里面，Angular数据绑定在$scope上面
• AngularJS使用双向绑定，Vue在不同组件间强制使用单向数据流，这使应用中的数据流更加清晰易懂
• vue有组件化概念，Angular中没有。在Vue中指令和组件分得清晰，指令只封装DOM操作，而组件代表一个自给自足的独立单元（有自己的视图和数据逻辑），在AngularJS中，每件事都由指令来做，而组件只是一种特殊的指令

3. Vue三大组件

3.1 vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

3.2 vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

四大核心概念：

• State：Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
• Getter：用来从 store 获取 Vue 组件数据。Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
• Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
• Action：可以给组件使用的函数，以此用来驱动事件处理器 mutations 。Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态。并且Action 可以包含任意异步操作。

3.3 vue-resource

Vue-resource有体积小，支持IE9以上的浏览器，支持promise特性的特点。同样推荐使用npm来安装Vue-resource。

$ npm install vue-resource 

在安装并引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。