Vue Introduce

这篇 PPT 是关于最近在做 H5 版杭州公交的经验分享，里面部分细节也包括工作一年的总结。

简介

Vue 是我在 8 月份第一次接触，用周末两天时间熟悉了下 API 及 Vue 全家桶，框架学完练练手可以熟悉思路，在之后的项目中能马上使用到。所以我将我的博客从 Angualr1.3 改写到 Vue1.0，花了不少下班时间。项目是由 vue-cli 基础上开发，现已在 GitHub 上开源，另外还包括对博客支持的后台代码，使用的是 Node+Express+Mongodb。

之后 Vue2.0 发布后，趁着项目测试的空隙，又将博客升级到 2.0，改动的部分及总结在博客中已写出，可以作为升级的参考，链接。到目前为止，已经使用 Vue 直接开发了 3 个项目，加上今天的分享，应该是第四个了。因为 Vue 对浏览器的唯一的限制是 IE9+，故移动端应该是没问题的。

目录

这个是 ppt 的顺序，有些思路可能某些同学没接触过，我也是用比较形象的方式给大家讲解。我希望以后大家在学到新的东西都能通过这种方式分享出来共同进步，回顾总结，加深自己的印象。

如何选择框架

这里主要是我对我已有的经验来分析如何根据项目来选择框架。可能由我的局限性，希望能和大家碰撞下思想。

1. 对于后台管理系统

我曾经使用过两次 jQuery+ifream 框架（二次维护，历史遗留问题），通过接口获取数据后拼接 HTML 字符串然后 append 到 DOM 中，因为需求没有设计成 UI，当时拿到的是功能清单，UI 只能靠我们前端自己设计。因此在写 render 函数之前，我将画好的 UI 给 leader 看，然后讨论交互，连问多遍有没问题后才敢开始写 render 函数，因为需求改动后，render 函数就会废弃再写！不过最后结果还好，返工的不多。另一个是给后台写 jsp 模板，分不清前后端界线，js 交互也不敢多写（后端同学理解 JS 也是头疼）。

以上，也许也能看出问题点了，代码无法复用，需求改动后代码改动多；前后端界线不清，工作内容会有重叠，口头确认不是很好的规范。所以我倾向于基于 MVVM 模式的 SPA 系统。前后端由 API 文档划分界线，因为不涉及到首次加载速度、浏览器适配范围和 SEO 等问题，我认为 SPA 的方式是可行的，也是大多数公司在用的方式，例如阿里云控制台、收钱吧控制台、盈联智能商户管理系统等。

2. 对于面对消费者的 PC 页面

这种场景，使用后端渲染的方式无可厚非，加载快，利于 SEO，页面可缓存等优点。

3. 移动端展示类型的页面

这种情况大多数不会超过 5 个页面（类似于抽奖、活动展示、答题、留言板等），且页面间衔接的紧密度不高，使用 zepto 框架即可。开发快速，a 标签跳转，如果不喜欢 300ms 点击延迟，那就上 fastclick 就好，一般开发人员就能胜任。

4. 移动微应用

最后一个场景就是较为复杂的移动微应用，古老的方法是使用后端渲染的方式进行，例如 jsp、hbs 等，如果不同页面间数据需要传递也只能放到 url 中或者 sessionStorage 或者 localStorage 中，开发逻辑不好维护，需要加大量的注释。页面跳转还需要再次加载公共的脚本，如果服务器开了缓存还好，否则用户体验不好。我这里倾向于使用 SPA 模式开发，由路由控制增量加载的内容（懒加载），webpack 进行代码分割，确保首屏之外的资源按需加载。前端控制范围增多，API 划分界限。

MVC 和 MVVM 对比

Vue 是基于 MVVM 开发模式的框架。在 MVVM 之前还有很多开发模式，不过都被踩在时代的脚下，比如 MVC。就我经验所及的范围，我认为 MVVM 在处理 UI 交互方面应该是抽象的最全面的模式。

上张图是 MVVM 的结构，在 SilverLight 或者 WPF 开发中常用的模式，同理，前端也是和 UI 交互的部分，模式借鉴很有意义。View 层只依赖数据，降低 View-Model 与 View 之间的耦合；只要数据相同，View-Model 可复用，UI 测试转化为对 Data 的测试。

jQuery 是 MVC 开发模式的一个代表。在 jQuery 代码中，controller 中存在大量的和 view 耦合的逻辑，例如 jq 中的 html 片段拼接，无法复用和维护困难。另外，controller 基本没有测试的可能。

MVC 和 MVVM 业务实现区别

1. MVC 方式

以我现在在做的页面对 MVC 和 MVVM 做个对比。

页面 1 是第一次的需求，我按照页面将 HTML 片段和数据拼接写好 render 函数，之后 append 到页面中，数据通过 ajax 获取。当 UED 改图时（页面 2），可以看出页面的结构发生了变化：由之前的上下结构变成了左右结构，对用的 HTML 片段也要发生变化，故 render 函数需要修改以适应新需求，我醉了。。。这种需求以前遇到很多回了！view 和 controlelr 高度耦合，并且 HTML 片段不易再次维护，不可测试也无法复用。

2. MVVM 方式

如果页面是使用 MVVM 模式做的话，从上面可看出，页面的数据是没变动的，只是 HTML 变动，故使用 Vue 双向绑定的基础功能，我这里只需要修改 HTML 即可，View-Model 中的代码无需修改。另外，只要数据格式没问题，页面的渲染效果也固定，可测试。之后讲解下代码复用部分。

3. View-Model 代码复用

换乘摘要[1]、换乘详情[2]、换乘地图[3]三部分的页面有公共个数据部分：URL 参数（起始终止位置信息+换乘策略信息）、当前策略下换乘信息（allData -> 包含起止经纬度、摘要和详情），换乘地图独用 transferMap。因此，此部分的 View-Model 可复用，只需要判断 path 后开启必要的部分即可。

以上就是 MVVM 的三个优点：低耦合、可复用、可测试、易维护。

Vue 性能

我一般在使用 Vue 都是在做移动端开发，既然选用是看中他的两个特性：运行快+加载快；上图是 Vue2.0 的综合性能对比图，右边是 Benchmark 跑分（不服跑跑分），绿色越深代表越好。红框圈出的部分从左到右依次是 react、Vue2.0、原生 JS。想必大家能看出来差异了。值得一说的是，Vue2.0 是基于更快的 Virtual-DOM。

Vue 构建大型项目及生态

Vue 在构建大型项目也不逊色，因为 Vue.js 自身只是处理 View 层的框架，做大型项目需要协同插件的协助，这个与 react 很像。可以说 Vue 构建大型项目的插件都已完备。参见上图。

我为什么使用 Vue

最后说下我为什么倾向于使用 Vue。我认为，工具的价值在于为人服务。Vue 及其附属的 Vue-cli 工具很好的在开发者体验和最终生成代码之间做好了桥梁，即：说明文档详细，代码编写简单，API 抽象到位方便别人阅读，最终代码运行高效。

另外，框架的选择取决于团队的水平，Vue 还是很简单的，而且还是中文文档哦。

最后

用了 Vue，我可以正常下班了

(完)