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才能更真切地服务好开发者。【注册参会】

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

Vue.js教程-组件化开发
Vue.js教程-组件化开发前言 Vue组件化什么是组件化 Vue单页面开发的解释组件化思想组件的使用原理实际开发中的使用-父子组件父子组件传递数据父传子-props用法子传父-th ...
[Vue.js] 深入 -- 组件化开发
组件化开发思想现实中的组件化思想体现标准分治重用组合组件注册全局组件注册语法 Vue.component(组件名称,{data:组件数据,template:组件模板内容 }) 组件用法 ...
Vue.js的组件化开发
组件化开发什么是组件? web中的组件其实就是页面组成的一部分, 好比是电脑中的每一个元件(如硬盘.键盘.鼠标), 它是一个具有独立的逻辑和功能或界面, 同时又能根据规定的接口规则进行相互融化, 变 ...
为什么要用Vue.js的组件化开发
那么什么是Vue组件呢?它是vue.js最强大的功能之一,是可扩展的html元素,是封装可重用的代码,同时也是Vue实例,可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子.这 ...
Vue入门之组件化开发
Vue入门之组件化开发 http://www.jianshu.com/p/6718ab1caa81 组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的 ...
【Vue】Vite 组件化开发
文章目录组件化开发一.组件化开发思想二.Vue 组件的构成 2.1 组件组成结构 2.2 组件 template 节点 2.2.1 在 template 中使用指令 2.2.2 在 templa ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
Vue基础知识+组件化开发+模块化开发总结
三.内容: 一.MVVM View层视图层,我们前端开发时候的DOM层主要就是给用户展示各种信息 Model层数据层:可能是我们固定的思数据,更多的是来自我们的服务器,在网路上请求下来的数据 V ...
vue相关的组件化开发和模块化开发及工程化
vue作为当前最流行的前端框架,随着更新迭代,组件化和模块化思想就成为了主流. 大多数招聘信息提到模块化开发,我自己理解vue的模块化:javascript模块化思想是利用es6的 import/ex ...

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

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

最新文章

热门文章