Vue.js的组件化编程

分享：

很高兴今天有机会来跟你们聊一聊 Vue.js。分享前我想告诉你们的是，Vue.js 是一个前端框架，这个很重要。

为何我没有选择 React？React 相对于整个开发业务来说是比较「重」的，并且实现的方式其实挺超前的。

我虽然并不讨厌 React，可是因为 Vue 更加简单和轻便，可能对于一些相对简单的团队来说，是一个更好的选择。

本次分享中，我会先介绍一下 Vue.js 的历史，而后重点讲讲掘金在开发中总结的一些组件化编程经验，最后说一说咱们是怎么使用 Vue.js 的

首先介绍一下 Vue js，它是一个很「高大上」的前端库。

用库的目的是为了能在最少的时间里写出最多的代码，可以在产品经理找你麻烦以前就把整个项目搞定。我认为这是一个好的库所具备的意义。

MVVM 这类前端框架，它自己就是一个设计模式。这是一种能够用同一种方法解决一些广泛问题的思路，是一个抽象的概念。而 ViewModel 这个东西在这中间，至关于一个黑箱子。

若是咱们不使用 MVVM 会怎么样呢？

举个例子：当网站数据改变的时候，咱们要手动作一下操做，把某一部分展现的 UI 从新渲染一遍，这会是一个很麻烦的过程。可是若是咱们使用 MVVM 框架，当数据发生变化以后，UI 改变的这个部分就会由这个框架来帮咱们搞定，这至关于它造了一个「轮子」，咱们在上面跑就能够了，这就是 MVVM。

什么是前端框架？在我看来具备一个很重要的「点」才能叫前端框架，一个小的「轮子」或者小的工具不能叫框架层，只能叫工具层。

首先它要有一些约定的代码方式来编写；

其次是写起来要很容易。像业务逻辑这类代码若是「裸」写的话，从抓取、数据改变等等方面每每须要写个两三百行代码才能完成一个小事；若是有这个框架，写五行就能搞定。

第三，代码须要容易维护。由于使用一个框架，代码会有一些规范和结构，经过这些规范和结构可让咱们很方便地维护代码的 Code Base。

还有就是做为一个有价值的框架，随着网站业务逻辑不断地复杂化，这个框架必须依旧能够存在。

好比说，当业务逻辑至关复杂的时候，复杂到几百个页面组件的时候，不少框架在这个时候很快就不行了。可是使用好的框架，让我有最佳实践可以解决这个问题。它其实就是经过一些规范让你在更复杂的业务逻辑里依旧不会丢失掉、迷失掉。

这也是咱们使用框架的一个准则，由于掘金的网站很复杂，咱们的前端业务也随之变得愈来愈复杂，这就使得在前端库方面，性能也成为了咱们在乎的点之一。

以上，是我认为一个好的前端框架应该拥有的一些特色。

接下来我会给你们展现一个简洁的代码块介绍一下 Vue.js。

能够看到，代码块左边是 UI 层，右边定义了 State。经过简单输入的两个单词你们应该一下就懂了。

这段比较简短的代码可让咱们作到一些事情，也能看到信息输出。其实，咱们会多问一句，它究竟是怎么实现的呢？

不少人在使用框架的时候并不太在乎这一点，但我仍是蛮在乎的。

这段代码块实现的原理，就是利用了一个 ES5 出现的特别重要的属性，不过，它并不支持 IE8 如下版本的 IE 浏览器：

假设 A 是一个 Object，当咱们在它下面定义一个值的时候咱们能够定义不少东西。最重要的就是图中这两个函数。

每当咱们去取 A.B 这个值的时候，这个函数会被调用，并且会经过这个函数调用一个值。这个函数会在 Set 值赋值的时候被调用一下，这样使得函数在调用值的时候都会有所处理。

经过以上这些内容，我想说的是 Vue.js 其实并不复杂，它就是经过调用一个很原始的函数来作到的，可是又有不少代码层面的优化，这是它很是棒的地方。

另外，咱们每次提到框架，我必定会提一下这个框架的活跃度，为何？由于框架的活跃度就表明了这个框架的完整度。

什么叫一个完整的框架，除了我刚才讲的一个框架应该具备的好的特色之外，它还应该有一个活跃社区来解决用户的问题；一样，它应该有本身测试的地方，有不断更新代码边缘库的地方。

Vue.js 在我心中还有一个很是很是好的点，也是我特别特别在乎的点，就是 Vue.js 挺「性感」的。

Angular 刚出来的时候也是一个让不少人感受很性感的框架，但一年多以后忽然就变得「Low」了。

相反， Vue 直到如今依然给人很性感的印象，我想，很大一个缘由是它使用了各类「轮子」。

Vue 对于我来说，它没有随时间推移而性能降低或者变得不性感的缘由，也是由于使用 Vue 的这群人的贡献使它融合了不少库的各类特色，固然，一下子我也会讲一讲它是怎么跟别的轮子结合的。

固然，Vue 一直都能在第一时间获得更新，依然保持高效有用，这也是很重要的。

另外，Vue.js 的语法也很简单。在我第一次去学 React 的时候，我以为官网太不人性化了，Vue 的学习曲线相比于前者也显得不是那么陡峭。

我能够掷地有声的讲，Vue 比 Angular 快，比 React 轻，它一样性感地结合着新的「轮子」。

同时，它的文档官网也很好看：文档作的好，用户开始使用它的成本会大大降低。

最最重要的一点，也是我最在乎的，就是我就是喜欢，我无论了。

接下来咱们讲一下 Vue 的组件化，我先讲为何组件化，再讲如何实现组件化，以及在 Vue 实践里咱们是怎么作的。

为何要组件化呢？由于爽。由于任何一我的处理信息逻辑的能力都是有限的，因此当咱们面对一个很复杂的逻辑的时候，是不太可能一次搞定一大堆东西的。

可是，咱们能搞定一个小东西，以及各类各样小东西之间的关系。出于这一点考虑，当咱们面对无数的系统时，咱们必定会把它层面化，以后再组件化。这是咱们本能会作的反应，这里我就再也不赘述了。

那么，如何实现组件化？

咱们应该按照定义一个组件、加载一个组件、使用一个组件、控制一个组件的生命周期这样的流程来分析这个问题。

这是一个 HTML，这里面有一个我定义的小组件，它援引了一个 JS 的代码。这段代码的第一段就是经过找 ID list，去把这个 Vue 双向绑定，绑定到相关的 HTML 里。

可是，咱们知道里面有一个组件，这个是怎么出来的呢？咱们能够用 Vue 定义一个。

我先说一个比较直白的，在这里看到一个 template，就把这个放在里面了。咱们要把这个 template 放到这儿。

而后是注册，这段代码装起来，就变成底下的，这个就是在找到 Exmple 以后把相应的组件和变量赋予它相应的 Dom 文件和样式，这就是它完成一个最简单组件化的流程。

刚才你们看到那样的一个文件 (app.vue)，你们知道，那个文件直接传给网站是不能展现的，它必定用了工具把那三块抓出来而且合并成另一个独立的 HTML 或者是 style 让网页能够展现。用的就是 webpack，这是一个打包工具，这里全部的模块都是工具，没有什么特色的。

它干了些什么？

经过定义好的一些方式，当它测试一个文件的后缀时会用一个 vue loader 的库，它能够根据相应的语法能够读懂像 vue 这样的文件，它知道怎么把刚才那个文件的 style 部分抓取出来，并且能够用到 SaaS 以后处理。它看到 template 以后把这个文件抓取出来再组装起来，或者能够根据你的需求变成多个文件，这就是它给你的无数的选择。

它就是一个打包工具，其实大部分人学它的就是定义语法是什么等等的。它就是学好定义文件就是一个很好用的打包工具。

这是一个网站，最重要的一块逻辑就是咱们写的业务代码。在这里有几个应用自己的 App.vue，这里又有两个组件，以及底下是 nodemodules 和 webpack 配置文件。

咱们来看一下这个配置文件是什么样的。

首先它会读文件，其次会输出到这个文件夹下的文件里，它用的是 vue-loader，再日后看到最上面，就是生成一个 vue，引入官方库，它就把这个组件传给整个应用。

在 APP 里有本身一块内容，而且还援引了那两个组件。这是怎么作的呢，这和上一页的作法是同样的。

最后，我讲一下很重要的，就是数据之间的流通。主要的话是三个：

第一，Props。我刚才说的就是父组件能够给一些数据到子组件，可是须要一个一个去定义。

第二，继承。这是在 1.0 以前用的，以后就废掉了，就是能够把子组件全部的元素都弄进来，可是后来这个东西不用了。

第三个，Vuex。其实这个逻辑跟前面讲的都很像，就是父组件能够把一个值给子组件，子组件能够把这个给父组件，父组件能够把这个给全部人，以及组件里能够相互间调用来调用去，其实这就是一个数据流的东西。

这时候咱们会遇到一个问题：当整个网站是一个应用，它就要知道如今登陆的用户是谁。

这样的话每一个地方都要定义，因而咱们用一个管理器专门去管理，好比说用户。应用级的变量咱们就要经过业务来实现。这里咱们没有讲很细，没有讲 Store等等的，由于前面的刘辉已经讲的很清楚了。

我就讲一下 State 管理器，这使得在任何组件里想去触碰应用级 State 时候都有相应的函数调用。这个东西出来的也不是特别久，并且概念比较新，如今咱们已经应用到咱们应用里了，因此这里你们有时间能够一块儿讨论一下，刚才讲的这些已经使用到咱们 APP 中了。