企鹅社区移动版Vue2.0升级手记

腾讯云技术社区-掘金主页持续为你们呈现云计算技术文章，欢迎你们关注！

---

刘小松：2010年加入腾讯，从事区域业务的应用开发，具有十余年的项目经验。在Vue的应用、腾讯新闻和微信的SPA开发有深度实践。

前言

企鹅社区移动版前端采用VUE 1.0开发。随着官方2.0的推出，前端界反响良好，因为项目自己在1.0的时候存在没有解决的问题，正好在2.0中获得解决，因此义无反顾地决定升级框架至2.0版本。

首先，官方推荐使用迁移工具，对当前项目作特性识别，并给出修改意见。我的以为能够节省不少工做，能够快速找到差别点，并快速修改代码。下面简单介绍一下这次升级的过程，可为类似的项目提供参考。

第一步、安装迁移工具

官方文档参考：github.com/vuejs/vue-m…

本案例是在tlinux环境下运行的，若windows环境下，可能后续操做略有差别。

运行命令：npm install --global vue-migration-helper

尝试运行一下以下命令，检查是否安装成功：

vue-migration-helper

当运行上述命令提示vue-migration-helper: command not found时，你须要作一下ln操做。上图中已经告知程序安装的路径（下述命令中请替换你的文件路径），因此你能够执行如下操做：

cd /usr/local/bin/
ln -s /var/www/script/node-v4.4.7-linux-x64/bin/vue-migration-helper vue-migration-helper复制代码

第二步、借助迁移工具来评估迁移代码

进入项目文件目录，运行命令：

vue-migration-helper ./src/app/

正常的状况下就能够获得须要升级的代码清单：

因为清单数据量较大，不方便查看，能够调整一下命令将结果保存到文件：

vue-migration-helper ./src/app/ > /data/log/vue-update.log

下载文件后，能够经过文本工具查看：

第三步、升级代码

这个部分是升级工做中最花时间的部分。官方也有详细的参考说明，根据对应的点进行代码调整便可。

VUE：cn.vuejs.org/v2/guide/mi…

Vue Router：cn.vuejs.org/v2/guide/mi…

经过实践，我总结了几点在整个过程当中遇到的难点和个人解决思路：

一、HTML插值变化，移除了{{{value}}}语法

在1.0中，须要格式化显示HTML内容时（用来处理换行转<br />及一些容许使用的特殊字符），个人作法是预先定义数据处理函数，而后使用filter定义为全局过滤器，直接对数据进行处理

Vue.filter('html', parseHtml);
{{{value | html}}}复制代码

而在2.0中，给出了新的方案

<div v-html="value"></div>复制代码

根据文档大意，在v-html指令中不支持过滤器。固然，我也尝试了一下

<div v-html="value | html"></div>复制代码

测试结果没有获得想要的，因此放弃了这种作法。要实现HTML的输出：

方法一：是在JS层预先作数据格式化，再赋值给变量（也能够用“计算属性”的方法）。优势是简单易用，直接调用v-html输出；缺点是在多种场景下调用的话，就会出现重复的代码。

方法二：封装公用组件，将数据处理放在组件内部，再将组件定义为全局组件。优势是可重复调用，统一处理方法，一处修复全局生效。缺点是在组件嵌套时，须要单独引入组件。

下面是htm.vue组件示例代码：

定义到全局组件：

调用示例：

二、生命周期变化，意味着来原的逻辑将会有大的调整

图：1.0版本

图：2.0版本

在1.0中使用ready钩子的地方须要替换，在2.0中可使用mounted替代，能够参考官方文档

固然，在整个业务逻辑中，若是使用了上述其它钩子，也须要作调整。

三、VueRouter升级，导航钩子变化较大，带来的代码改造相对较多

详细的升级说明，请参考官方文档：cn.vuejs.org/v2/guide/mi…

在0.7中，当页面上有鉴权操做时，我会用到activate钩子，鉴权失败后能够友好终止用户的访问。升级后，虽然官方文档中建议使用beforeRouteEnter钩子替代，但缺点是没法访问this，须要作next回调来实现。

因此，我决定使用全局钩子来统一实现鉴权，实践证实能节省很多代码，在全局钩子中实现鉴权后，后续业务逻辑能够再也不关注鉴权逻辑，代码更清爽了。

固然afterEach也很是好用，能够经过它来设置页面title等一些后续操做。

在0.7中，在加载数据环节，会用到data钩子，它专用于设置当前组件的数据，在2.0中，移除了此方法，确实带来了不便。文档建议使用watcher对$route作响应，而后调用定义的方法来处理。

实际项目中，获取组件数据的能够在template编译前执行，所以created钩子能够用来处理数据，代码升级的改造量最小。

经过watcher对$route作响应彷佛有更重要的事情要作，看以下路由配置：

当路由带参数时，参数变化不会致使整个组件从新初始化，所以不会再执行created事件。在这种场景下，就必须使用watcher。

四、关于<keep-alive>组件的使用

在使用该组件时，须要考虑项目是否适用。下述状况不建议使用：

1）当数据交互相对较多的状况下，数据不会及时更新；

2）当页面须要带参数进行访问时，参数变化可能致使数据未更新；

3）须要及时鉴权的页面

我企鹅社区项目中，要让<keep-alive>生效，须要在顶层入口添加指令，模板以下：

<keep-alive>
<router-view></router-view> </keep-alive>复制代码

其中<router-view>便是动态组件，此时会将整个项目的路由缓存起来（有些路由我是不但愿被缓存的），这也是我感到<keep-alive>不够灵活的地方。

固然，事实也并不是不可解决，Vue提供了两个专用方法能够场景下使用：

1）activated：在keep-alive组件激活时调用；

2）deactivated：在keep-alive 组件停用时调用；

所以在部分场景下，能够借助activated钩子来对数据进行处理，同时也借助watcher对$route作响应，能够实现带参数的页面动态起来。固然，这将带来巨大的代码改造量，须要仔细评估。

五、实现scrollBehavior遇到的坑

在router配置相对简单，仅须要添加一个方法便可：

配置后，并无获得预想的效果。在测试过程当中，打印savedPosition的值，始终为“0，0”，猜测scroll触发的事件没有正确得到滚动位置，因而查阅了VueRouter的实现代码

这里监控的是整个页面的滚动位置，而咱们在实现上对body、#app挂载节点上作了height=100%的处理，致使滚动时并无触发window的scroll。

因而，经过改造页面部局，将height=100%的定义去掉后，scrollBehavior终于生效了。但新的问题也随之而来，当body的高度没有超过window的高度时，会影响到页面上定义的浮层效果，因此优化无止境，还在探索中。

结束

这次升级本来计划3天时间，而最终花费的时间是1周。根据官方文档进行代码迁移后，仍然会有大量的报错，因此调试的过程也是深度理解Vue2.0变化的过程。

本文有一部份内容未说起，就是生产环境的升级，包括nodejs、webpack和Vue所依赖的库等系列工具，这部分虽然有一些变化，但都比较容易调整，这里就很少说了。

企鹅社区项目的移动版体验地址请扫二维码

相关阅读
Vue.js 实战总结
前端 fetch 通讯
vue.js 初体验— Chrome 插件开发实录

---

此文已由做者受权腾讯云技术社区发布，转载请注明文章出处
原文连接：www.qcloud.com/community/a…
获取更多腾讯海量技术实践干货，欢迎你们前往腾讯云技术社区