主题：【原创】菜鸟初学 Vue js，之一，为什么是它 -- 铁手

最近决定西西河的前端主要用 Vue来实现一些效果。在决定之前有一些利弊权衡，做过一些比较，大致学习了一些东西。现在属于边学边用。写这个系列，一来是希望能得到一些指点，二来也算是给其他人一个不同的学习角度。

对于我来说，我没法先把一个系统完全搞明白，然后再来设计规划，完全利用一个系统的各种特性。我能做的，无非是在现有的体系里，做部分的修改，而这些需要修改的地方，就需要利用新的系统，比如 Vue 来提供解决的方案。我看过不少 Vue 的网络文章，包括它自己的极其优秀的文档，很多东西当时看的时候都觉得很棒，也能理解，但是到了我需要具体解决某个问题的时候，就往往抓了瞎，要琢磨半天。绝大多数的网络文章或教材，都是高手写出来的，就很容易忽略菜鸟比如我现在，所面临的问题。

其实我最早很中意的，不是 Vue，而是 Polymer。主要原因之一就是 component 组件的封装和定义，乍看也很容易上手。Recat 我瞄了几眼，感觉不顺，有难度。Angular太粗重，看上去也很复杂。Vue 和 Polymer 很类似，我看上去也很顺眼，特别是它的文档做的的确好，初步上手解释的非常清楚。对我来说，更重要的是，整个系统不需要从头开始，想要在现有系统上修改就可以直接上手。只可惜 Polymer 生在了 google 家，而 google 似乎主要是 Angular。更何况，三大巨头常见，四大巨头很少，所以 polymer 目前来看，只能是多保重了。

采用 Vue 的另外一个原因，是内心里多少希望多一些选择的存在，多一些竞争的存在，是推动前进的动力。react 有 facebook 为后台，angular 有google 为后台，Vue 基本上属于个人+社区为基本，支持一下，无论大小程度，我觉得长远是有益的。以后我会找机会吐槽一些因为一家独大所导致的拉后腿现象。

当然，采用 Vue，也是因为它技术上的特性。我个人比较喜欢以功能为基础的封装，而不是因为是 javascript 所以 javascript 要在一起，css 只和 css在一起，html 只和 html 在一起。我也对过于复杂或庞大的前端有莫名的恐惧。

用户访问一个网站，查看某个页面，他只关心点击了一个链接后，内容是不是很快就显示出来了。从网站的角度来考虑，需要关心服务器的性能，需要考虑有多少人访问，有多少人同时在访问，捎带要考虑客户端的性能，中间的代理缓存，还要考虑网站的内容能不能被搜索引擎检索，等等。有时候就需要综合考虑，哪些工作放在哪里，平衡性能，最后总体上达到一定程度的优化。

从西西河的角度，对考虑因素的重要程度我是这么排的：

1、搜索引擎检索的友善程度

2、网页缓存性能

3、网页显示及部分动态效果

基本上就是主要内容文本显示，每个内容页面尽可能长期缓存，通过 Vue 来实现前端的一些动态效果，及必要时能够对部分内容进行更新。

现在说说菜鸟初入门对 Vue 的理解。以往用 javascript，是直接对网页元素进行操作，要自己去获得数据，自己定位，然后自己操作。以 分页 查看为例子，如果需要在当前页面下增添下一页的内容，需要去取得下一页的内容，然后找到需要添加的位置，然后添加内容进去。Vue 的基本概念是你定显示的模板，你组织数据，我来干这些定位、添加、显示的事情。更方便的是，只要数据有更新，Vue 就会自动帮你显示这些变化。

在 Vue 中，我认为一个很重要的概念是 component，组件。组件相当于积木，在合适的地方都可以搭一搭。网页中需要一个 root instance，这个 instance 本身也可以看作是一个大的组件，里面可以包含其他组件。所有的组件都是挂靠在某个 html tag 上。这点理解我觉得很重要，对于组件里的 模板 设定，以及一些其他的功能的理解会有帮助。

不同于一般的 html tag，Vue 的组件是活的，它有自己的数据，模板和逻辑，能够从外面接收数据，也能往外面送数据。Vue推荐的做法是，从上往下用 props 接收数据，从下往上通过自定义 event 来向外传递消息。root instance 是所有组件的灵魂，是中央调控。这样设定的好处是，重要的逻辑和数据可以集中在 root instance那里，组件之间能够尽量相互隔离，各自专心干自己的事情，可以避免数据乱窜的现象。