vue2+vuex+vue-router 快速入门（一） 简单介绍

vue2

　　vue 官方解释为一套构建用户界面的渐进式框架。而我的理解 vue 是一套以视图为核心、数据为驱动的组件化开发框架。使用过模板引擎的同学都知道：只要我们把数据传入已经编译好的模板中，便能渲染出我们想要的视图。

// 伪码
import engine from TMplateEngine
import template from 'somewhere'

let  data = {...}   // 数据
const compile = engine(template)   // 编译模板
const view = compile.render(data)；  // 渲染模板生成视图
document.getElementById(id).append(view);  // 把视图载入 DOM 中

　　我们可以简单理解为，vue 就是一个拿来做这种事儿的框架，它的每一个组件就是一个独立模板。当然 vue 并不仅仅只做了这些，它还做了更多的事情，包括但不仅限于：

• 组件化应用构建
• 数据单向绑定
• 虚拟DOM

组件化应用构建

　　之前提到 vue 是一个组件化开发框架。一个组件实现一个简单的功能。而组件化应用构建就是让多个相对小型、自包含和通常可复用的组件构建大型应用。幸运的是，几乎所有的应用都可以抽象为一个组件树。

　　通过以上的组件树抽象。我们可以把一个复杂的应用大事化小，从而让我们只需关注每一个小功能的实现。也极大的增加了代码的复用性，从而使整个开发过程变得非常愉悦。

数据单向绑定

　　在使用模板引擎中，我们了解到。不同的数据会渲染出不同的视图。vue 也正是如此，它采用单向数据绑定 + 自动数据变动识别功能，让开发者从判断数据是否改变、何时应该重新渲染模板的工作中解脱出来。从而更加关注于视图与数据本生的关系。数据一旦发生变化（vue 为我们判断）vue 便会重新渲染，让视图实时与数据保持一致。
　　

因为是单向绑定，数据的变动会自动同步到视图上。而视图上的变化，并不会影响到数据。这需要其它方式来实现。

虚拟DOM

　　vue 在把组件渲染为视图之后，并没有直接替换真实 DOM 树中内容，而是如同 React 一样，在中间加入了一个虚拟 DOM。那么这个虚拟 DOM 是拿来干嘛的啦？
　　我们都知道修改 DOM 结构是一个费时的过程，修改量越大，耗时越多。而虚拟 DOM 就是拿来帮助我们在不影响最后结果的情况下，最小改动真实 DOM 结构从而提高渲染速度。
　　比如一个包含多个内容的组件，因数据变动，需要修改其中的一个数值。因为我们是组件化开发，一般情况下，只能整个的替换掉 DOM 结构中相应的部分。这样就导致很多不相干的部分也跟着一起重新渲染，这肯定是不好的。而虚拟 DOM 却可以帮助我们仅对需要修改的地方进行一个局部的 update 即可。两者之间的效率可想而知。

vuex

　　在整个应用都被抽象为组件树的情况下，各自之间是相对独立的，他们都有各自的特有数据来控制着视图的变化。而如果某两个或多个组件之间需要共用同一个数据源，那我们应怎么办啦？这便涉及到了，组件之间通信的问题。对此 vue 提供了两种处理方式。

• 自上而下（父组件传递给子组件）通过组件的 props 属性传递。也就子组件声明一个属性来接受父组件传递下来的数据。自下而上（子组件传递给父组件）则通过子组件 emit 一个事件来触发父组件中的相应监听实现。这种方式的局限性很大，处理兄弟组件之间的通信比较麻烦，所以仅仅适合简单的单纯的场景使用。

• vuex 方案，vuex 通过把所有组件之间的共享状态（state）集中到一个统一的仓库中（store）进行管理，再通过特有的通道来进行调用和修改。当某个组件提交了对某个数据的修改申请时，vue 便会自动监听并更新所有使用此状态的视图。

采用统一管理共用状态及规范出入通道，可以让我们更好的管理、记录状态操作历史，从而实现可控的转态回滚操作。这个有利于我们的开发调试。chorme 中的 vue 插件便是依据此进行开发的。

vue-router

　　vue + vuex 已经帮我们处理了大部分页面需求。而如果某一个位置，在不同的情况下需要展示不同组件，需要在多个组件之间进行切换时，我们应该怎么办啦？这便涉及到了页面路由的问题。vue-router 便是帮我们处理这个问题的。

参考文档：

vue教程
vue-loader教程
vuex教程