本文为稀土创始人阴明在 CODING 技术小馆北京站的分享内容整理。
CODING 技术小馆，是由国内专业的一站式软件服务平台 CODING 主办的一系列技术沙龙。邀请数位业内知名大牛以为当地用户进行技术分享，为开发者们带来一场纯粹的技术沙龙。下一站将于 5.14 在深圳举行，深圳的小伙伴不要错过哦。
很高兴今天有机会跟大家来分享 Vue.js。Vue.js 是前端框架，这个很重要。React 相对来讲整个开发业务是比较重的，而且实现的方式其实挺超前的，我其实并不讨厌 React，但是 Vue js 因为它的简单和轻便，可能面对一些相对简单的团队来讲，是一个不错的选择。
我会先介绍一下 Vue js 的历史，然后重点要讲一下在我们的开发中总结的一些组件化编程经验，最后说一说我们是怎么用的。我是稀土创始人阴明，我一般会跟人说我是一个可爱的前端工程师。
我们首先介绍一下 Vue js，它是一个很高大上的前端库。我们用库目的就是用最少的时间写最多的代码，能够在产品经理找你麻烦之前就把项目搞定，我认为这是最好的库。
MVVM 这类前端框架，它本身就是一个设计模式。一些普遍的问题用同一种解决方案来解决，这是一个抽象概念。viewmodel 这个东西在中间，是一个黑箱子。如果我们不使用 MVVM 会怎么样呢？比如我们数据变了，然后就要手动做一下操作，把某一块展示的 UI 重新渲染一遍，这是一个很麻烦的过程，但是如果我们用 MVVM 框架，就是当我们数据变化之后，UI 变的这个部分，它来帮我们搞定，这个相当于它造了一个轮子，我们在上面跑就完了，这就是 MVVM。什么是前端框架？在我看来有一个很重要的点才能叫前端框架，一个小的轮子或者小的工具不能叫框架层，只能叫工具层。
首先它要有一些约定的代码方式来写。其次是写起来很容易，像业务逻辑如果裸写的话，从抓取，数据改变等等写两三百行完成一个小事，有这个框架写五行就搞定了。第三，代码更容易维护。因为用一个框架代码有一些规范和结构，通过这个可以维护代码的 Code base。还有就是作为有价值的框架，随着网站业务逻辑不断复杂，这个框架依旧可以存在。比如说当业务逻辑相当复杂，复杂到几百个页面组件的时候很快就不行了，但是我有最佳实践能够解决这个问题，它其实通过一些规范让你在更复杂的业务逻辑里依旧不会丢失掉，不会迷失掉。这是最近我们在用的，因为我们网站很复杂，我们前端业务越来越复杂，前端库开始在意性能了，性能成为我们在意的点之一。在我心中，我认为这是一个前端框架应该拥有的一些特点。
（点击阅读原文可查看 PPT）
接下来会给大家一个简洁的代码块，我把我的 PPT 放到微信群里了。这一边是 UI 层，这一边是定义了 State。我现在简单输入两个字大家看一下就懂了，通过这段比较简短的代码大家就可以做到一些事情，大家可以看到这个动了，有信息输出信息。其实我们会多问一句，它到底是怎么实现的呢？其实很多人在使用的时候并不太在意，但是我还是蛮在意的。实现的原理，就是用了一个 ES5 出现的特别重要的属性，它其实不支持 IE8 以下。A 是一个 Object，当我们在它下面定义一个值的时候我们可以定义很多东西。最重要的是这两个函数，就是每当我们去取 A.B 这个值的时候，这个函数会被调用，而且会通过这个函数调用一个值。Set 值就是赋值时候这个函数会被调用一下。这个就是使得值在调用的时候都会有处理。我其实想说的就是它并不复杂，就是用了一个很原始的函数来做到的，但是有很多在代码层面的优化，这是它非常棒的地方。
另外，其实我们每次讲到框架，我一定会讲这个框架的活跃度，为什么？因为框架活跃度就代表这个框架的完整度。什么叫一个完整的框架，除了我刚才讲的好的地方，它有一个活跃社区解决问题，它有自己测试的地方，有不断更新代码边缘库的地方。 Vue 在我心中一个非常非常好的点，我特别特别在意的点，就是 Vue 挺性感的，Angular 刚出来的时候也是很多人感觉很性感的一个框架，但一年多突然就 Low 了，但是 Vue 现在还很性感，因为它用了各种轮子。Vue 对于我来讲，它一直没有慢下去或者持续性感的原因，也是因为用 Vue 的这群人的贡献使它融合很多库，一会儿我会讲它怎么跟别的轮子结合。它一直既在时间的最新，但是又变得很有用的框架，所以这是很重要的。
另外，它的语法很简单，因为我第一次去学 React 的时候，我觉得官网太不人性化了，但 Vue 它的学习曲线并不陡峭，我可以掷地有声的讲，它比 Angular 快，比 React 轻，它同样性感地结合新的轮子，它的文档官网很好看，文档做的好，用户开始使用它的成本会大大下降，最最重要的点，也是我最在意的，就是我就是喜欢，我不管了。
我们讲一下 Vue 的组件化，我先讲为什么组件化，再讲如何实现组件化，以及在 Vue 实践里我们是怎么做的。
为什么组件化呢？因为爽。因为任何一个人同时处理信息逻辑的能力都是有限的，所以当我们面对一个很复杂逻辑的时候，我们是不太可能一次搞定一大堆东西的。但是我们能搞定一个小东西，以及能搞定各种各样小东西之间的关系，因此人之本性，我们面对无数的系统，我们一定会把它层化，之后再做组件化。这是人的本性，这里我就不赘述了。
还有就是如何实现组件化？我们先定义一个组件，如何加载一个组件，如何使用一个组件，如何控制组建的生命周期。这是一个 HTML，这里面有一个我定义的小组件，它援引了一个JS的代码。这段代码第一段就是，我通过找 ID list，去把这个 Vue 双向绑定，绑定到相关的 HTML 里。但是我们知道里面有一个组件，这个是怎么出来的呢？我们可以用 Vue 定义一个，我先说一个比较直白的，在这里看到一个 template，就把这个放在里面了。我们要把这个 template 放到这儿。然后是注册，这段代码装起来，就变成底下的，这个就是在找到 Exmple 之后把相应的组件和变量赋予它相应的 Dom 文件和样式，这就是它完成一个最简单组件化的流程。
我相信用 Vue 的人对这个一定很了解，他们自己定义了一个新的文件格式，叫 .vue。在网页里的组建就是样子，以及 HTML 具体内容，和组件里的业务逻辑，希望用同一个文件来把这三个重要的部分放在一个文件里定义。很有意思的一点，在 template 旁边可以加一个语言，就是通过不同的 Loader 可以直接写不同的语句。我在这里直接用 lang 定义了这个，它可以把 Loder 直接定义传出来。这样的话我觉得组件化方式很满意，过程也很爽，这让我看到这个组件让我试一试用 vue 来写一个东西。最后就是彼此之间援引是非常容易的，我上面两个部分先不赘述了。
刚才大家看到那样的一个文件 (app.vue)，大家知道，那个文件直接传给网站是不能展示的，它一定用了工具把那三块抓出来并且合并成另外一个独立的 HTML 或者是 style 让网页可以展示。用的就是 webpack，这是一个打包工具，这里所有的模块都是工具，没有什么特点的。它干了些什么？通过定义好的一些方式，当它测试一个文件的后缀时会用一个 vue loader 的库，这个是根据相应的语法可以读懂像 vue 这样的文件，它知道怎么把刚才那个文件的 style 部分抓出来，而且可以用到 SaaS 之后处理。它看到 template 之后把这个文件抓取出来然后组装出来，或者可以根据你的需求变成多个文件，这就是它给你的无数的选择。它就是一个打包工具，其实大部分人学它的就是定义语法是什么等等的。它就是学好定义文件就是一个很好用的打包工具。
这是一个网站，最重要的一块逻辑就是我们写的业务代码。在这里有几个应用本身的 App.vue，这里又有两个组件，以及底下是 node_modules 和 webpack 配置文件。我们看一下这个配置文件是什么样的？首先它会读文件，其次会输出到这个文件夹下的文件里，它用的是 vue-loader，再往后看到最上面，就是生成一个 vue，引入官方库，它就把这个组件传给整个应用。在 APP 里有自己一块内容，并且还援引了那两个组件。这是怎么做的呢，这和上一页的做法是一样的。
最后，我讲一下很重要的，就是数据之间的流通。主要的话是三个：第一，Props。我刚才说的就是父组件可以给一些数据到子组件，但是需要一个一个去定义。第二，继承。这是在 1.0 之前用的，之后就废掉了，就是可以把子组件所有的元素都弄进来，但是后来这个东西不用了。第三个，Vuex。其实这个逻辑跟前面讲的都很像，就是父组件可以把一个值给子组件，子组件可以把这个给父组件，父组件可以把这个给所有人，以及组件里可以相互间调用来调用去，其实这就是一个数据流的东西。
我们遇到一个问题，当整个网站是一个应用，它就要知道现在登录的用户是谁。这样的话每个地方都要定义，于是我们用一个管理器专门去管理，比如说用户。应用级的变量我们就要业务来实现。这里我们没有讲很细，没有讲 Store等等的，因为前面的刘辉已经讲的很清楚了。我就讲一下 State 管理器，这使得在任何组件里想去触碰应用级 State 时候都有相应的函数调用。这个东西出来的也不是特别久，而且概念比较新，现在我们已经应用到我们应用里了，所以这里大家有时间可以一起讨论一下，刚才讲的这些已经使用到我们 APP 中了。
这是我给到大家的一些链接，这是一个讨论群，如果大家想讨论 vue 的话，都可以跟我们一起随便讨论。我们总是在总结，要不要学一个新的轮子？我们很痛苦的。像五年前我是一个高手，我能够把代码倒背下来，可现在没有用了，这样的话是不是以前做的没有意义了呢？其实我的逻辑就是，在很多的框架，代码，程序之间有些东西是互通的，我用 JS 的东西放在现在也是有用的，或者帮助我现在学的更快。我在这个过程中不断学新的库，不断学轮子，使轮子，这个过程积累的东西在代码当中都是有意义的。就是尝试一下新的库也是蛮帅的。
点击阅读原文获取讲师 PPT。
