360奇舞团钟恒：选用Vue.js进行组件化开发，我们遇到了哪些坑？

责编：陈秋歌，关注前端开发领域，寻求报道或者投稿请发邮件chenqg#csdn.net。

欢迎加入“CSDN前端开发者”微信群，参与热点、难点技术交流。请加群主微信「Rachel_qg」,申请入群，务必注明「公司+职位」。另可申请加入CSDN前端开发QQ群：465281214。

2016年，SDCC（中国软件开发者大会）相继走进了上海、深圳、成都、杭州各地。11月18日-20日将在北京完美收官。作为大会的重要分专题，前端开发专题已邀请到360奇舞团前端工程师钟恒担任大会讲师，现场将分享《使用Vue.js 2.0开发高交互Web应用》的主题演讲。

钟恒目前负责“声享”这款产品的前端基础架构及部分后端开发工作，并专注于Web应用开发、组件式开发以及对HTML5的新特性进行探究。会前有幸采访他，采访中前端组件化开发的难点及选用Vue.js实现组件化开发的实践经验 。

受访嘉宾介绍



360奇舞团前端工程师 钟恒

钟恒，360奇舞团前端工程师，负责声享前端基础架构及参与产品Node.js开发，同时对微信开发有深入研究。《响应式Web设计：HTML5和CSS3实战（第2版）》译者。毕业于中山大学，曾在w3ctech上翻译多篇关于Service Worker文章。

CSDN：首先请您做下自我介绍，目前所从事的工作及主要专注哪些技术领域。

钟恒：大家好，我是钟恒，任职于奇虎360奇舞团。我目前负责“声享”这款产品的前端基础架构及部分后端开发工作。

声享是一款可以制作有声幻灯片的Web应用，它能让您随时随地创建、编辑、录制和分享有声幻灯片。因为是Web应用，所以它无需下载安装，并且无论你身处何地，你都可以使用电脑、平板电脑或者手机等电子设备去访问它。

我日常专注于Web应用开发、组件式开发以及对HTML5的新特性进行探究。

CSDN：以您最近参与的一个项目为例，谈谈它的前端基础架构是怎样的？

钟恒：声享是我最近参与的项目。它是一个富交互的Web应用，用户可以在上面编辑生成新的幻灯片。因此，基于它的复杂度、日后的维护等需求，我们选择了Vue.js作为开发的框架，使用Vuex进行状态管理，另外我们使用Webpack和Gulp进行前端工程流处理。最后我们使用燕尾服（内部的一个工具，2.x基于Node.js的版本会开源）进行上线前优化。

CSDN：前端领域，组件化开发的难点有哪些？

钟恒：通过组件化，我们可以提高开发效率和维护效率。然而，无论我们使用的工具多么先进，在层层的需求迭代下，组件化一直有众多的难点。比如：

1.组件的复用性

当我们编写了一个组件后，当然希望可以在更多的场合使用它。然而每个场合的需求都是有差异的，那我们怎么做到既能在多场合复用，但代码量又保持合理呢？这就要求我们根据需求设计好组件了。

2.组件间通信问题

当我们进行了组件化开发后，组件间是互相独立的。如何去进行有效的通信？而且因为组件化了，我们可能会进行组件的升级或替换，会不会导致组件间的通信方式改变？因此我们也需要去搭建一个稳固的通信桥梁。

3.组件的可维护性

我们经常说产品是可恶的，因为总是改需求。但是更改需求是无可避免的，所以我们更应该确保修改少量的组件就能达到修改需求的目的。那么怎么做到尽可能少呢，这要求我们对于组件的粒度作出合理把控。

CSDN：实现组件化的主流框架有很多，您觉得在这方面Vue.js的优势是什么？

钟恒：事实上个人觉得，任何框架都有其优劣之处，选择框架必须要基于场景进行选择。那么我们选择Vue.js当然也是因为它能解决我们的需求。有以下几点促使我们选择Vue.js:

完整的组件化逻辑；

较好的性能；

方便趁手的API；

能够直接编写使用HTML和CSS；

轻量，并且能够和很多其余插件组合运用等等。

CSDN：在使用Vue.js时，有没有遇到一些困难？是如何解决的？

钟恒：因为我们使用的是Vue.js 2.0，项目刚开始的时候Vue.js 2.0刚刚进入Beta阶段，文档不是十分完整，而且里面也有一些Bug，这带来了一定的困难。

当时是参照Git上的feature更改列表和Vue.js 1.x的文档进行学习使用。不过我相信，对于大部分工程师来说，这并不是一个十分大的难题。

在后来的开发中，我们也遇到一些Vue.js中的Bug，这时候也有赖于Vuex这种状态机，让我们可以轻松复现出场景。然后我们再进行对代码的抽丝剥茧去定位出问题所在。然后通过Github的issue进行解决。

CSDN：平时喜欢翻译技术类文章，还翻译了《响应式Web设计：HTML5和CSS3实战（第2版）》一书，您是如何平衡写作与平时工作的？写作对您的成长有怎样的帮助？

钟恒：翻译的话其实也是抽空而为。在到公司上班下班后或者周末依心情进行翻译。一般来说，我觉得最好是保证好自己有合理的工作量，那么就能轻松地去完成其他目标。

翻译对于我的成长还是大有裨益的。首先，它能够一定程度的维护我的英语阅读理解水平，其二就是增加我的阅读量，接触更多新知识，第三让我能够更好地去阅读别人的思想，从而去提高自己的编程能力。

CSDN：面对技术的快速迭代，您是如何保持自己不断成长的？您对新人有什么建议？

钟恒：啊，其实我也只是个新人啦，还是有很多需要学习的地方。现在前端界的技术的快速迭代确实让很多人望而怯步。我个人觉得，在面对新技术的时候，要做到以下几点：

1.多了解。

我们需要去了解新的技术，它到底是什么？为了解决什么问题出现的呢？我以前有没有遇到过这种问题，我是怎么解决的，我们需要引入它吗？等等。

2. 多尝试。

遇到新技术，虽说不一定要用到生产环境中，但是我们可以自己去捣鼓一下，了解其特性。

3. 多思考。

如果有能力，我们甚至应该思考一下这个新技术的优劣和它的实现方式。

对于新人的话，我觉得最重要的是多思考。当产品抛来需求的时候，不要急着写，多尝试去设计一下。写代码也不要操之过急，多斟酌。如果可以的话，多看一下别人写的代码或者文章，再看看自己有何不足。

4.多交流，多沟通。

CSDN：11月18日，在SDCC 2016前端开发专题上，您分享的话题是？听众将通过该演讲获得哪些收益？

钟恒：在11月18日SDCC 2016前端开发专题上，我将分享如何使用Vue.js 2.0开发一个富交互式的应用。我会讲解在开发一个富交互应用的时候我们会遇到的问题，组件化的技巧以及Vue.js这个框架带给我们的一些优秀的解决方法。

相关文章：

Stackla前端团队Leader蒋定宇：国外前端开发者的别样人生

58到家周俊鹏：webpack PK fis，实现前端工程化我更喜欢前者

目前SDCC 2016前端开发专题的所有演讲嘉宾已全部确定，以下为嘉宾名单及演讲议题（排名不分先后），详情请见：SDCC 2016前端开发专题讲师、议题大揭底。

Stackla前端团队Leader蒋定宇

演讲主题：不断归零的前端人生

QQ音乐&全民K歌高级工程师袁聪

演讲主题：全民K歌React Native最佳实践

饿了么Node Team负责人黄鼎恒

演讲主题：纯手工搭建一个高性能实时监控系统

360奇舞团前端工程师钟恒

演讲主题：使用Vue.js 2.0开发高交互Web应用

Ruff架构师、JavaScript专家周爱民

演讲主题：有前端思想的物联网系统架构

58到家高级前端工程师周俊鹏

演讲主题：基于webpack的前端工程解决方案

想与这些专家现场面对面进行技术探讨吗？目前SDCC 2016大会门票8折销售中，团购更有优惠，是给辛勤工作一年的你，年终最好的礼物，或许这样，SDCC才能更真切地服务好开发者。【注册参会】