Vue.js 2.0 迁移指南

前言

vue 2.0 发布之后,就有将项目迁移到 2.0 的计划。对于一个不算小的项目,这样的工作量是巨大的,往往伴随着很多坑要踩。老实说,迁移 2.0 将导致项目的改动不少于 250 处。下面我会把迁移带来的一些问题及注意事项列出来,以防走弯路。

注意

迁移之前,你需要思考以下几个问题,再决定是否迁移。

  • 如果项目过大,又使用了 routervuex 等各种库。那么改动的地方将非常多。
  • 迁移期间,项目是无法运行的,只有全部迁移完成才能运行。
  • 迁移完成之后,即使可以运行了,但也无法保障100%没有问题。
  • 如果用了一些小众的库,要确保能与 2.0 一起使用,因为有的不兼容。

如果你还在犹豫,请看下面的迁移指南

迁移指南

官方文档

首先要说的是,请认真阅读官方文档。不仅仅是 vue,还有 vuexrouter 等。

迁移工具

官方提供了 vue 2.0 的迁移工具,可以有效提高迁移效率。但有些地方还是需要自己判断。

# install
npm install --global vue-migration-helper

# navigate to a Vue 1.x project directory
cd path/to/my-vue-project

# scan all files in the current directory
vue-migration-helper  
# scan all files in specific sub-directories
vue-migration-helper src folder-a folder-b  
# scan a specific file or files
vue-migration-helper src/app.vue  

vue

  • .native 修饰符
    • helper 工具没有提供语法分析,需要自己搜索
    • 组件上无法使用 @click,需要加上修饰符 @click.native
  • 属性内部的计算插值已经无法使用
// 可用计算属性实现 
<div class=“theme-{{a}}”></div>  
// =>
<div :class=“a”></div>  
  • debounce 移除
  • v-for 参数顺序改变

v-model

现在 v-model 只是一种语法糖。这使得很多自定义组件可以用到它。 使用时必需满足以下条件

  • 组件有 value props
  • 组件内触发 this.$emit('input', val);

注意:

当 v-model 是一个对象时。例:v-model="{show: false}"。在组件内改变 show 不会报错, 但 this.value = {}; 会报错。即使是这样,也不建议用这种方式改变 props,因为它使得数据流难以理解。

过滤器

  • v-model 因为只是语法糖,所以无法使用过滤器
{{ '2016-12-11' | format }}
// =>
{{ '2016-12-11' | format() }}

router

  • activate => beforeRouteEnter
  • beforeEach 现在通过 next 控制渲染,1.0 支持返回 promise
  • canReuse 决定组件是否可以被重用。但很可惜,2.0 已经没有该属性了。为了减少代码量,我选择刷新页面,防止组件重用。
  • 如果有重定向跳转,一定要将 redirect 放在最后,否则会死循环直到崩溃
new Router({  
  routes: [
    {
      name: 'welcome',
      component: require('pages/welcome')
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
});
  • / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
new Router({  
  routes: [
    {
      path: '/',
      component: require('pages/index'),
      children: [
          {
              path: 'recharge', // 1.0 => /recharge
              component: require('pages/recharge')
          }
      ]
    },
  ]
});

跳转方式

  • 声明式
<router-link to="/index"></router-link>  
  • 编程式
<button @click="$router.push('/index')">首页</button>  

数据获取方式变更

  • data 钩子移除
  • 如果只是简单的通过 url 参数来区分状态,可以监听 $route 变化以重新请求数据

导航参数的类型差异

假设我们有这样一条路由规则,/page/:index

  • 当我们在浏览器上输入 /page/1 时。 indexString 类型
  • 当我们使用 push 方法时,indexNumber 类型
this.$router.push({name: 'page', params: {index: 1}});  

vuex

  • 语法变化不是特别大,但是要注意所有用到 actiongetter 的地方都要修改。helper 工具没有提供语法分析,需要自己搜索
  • 如果需要在 data 中获取 getter,可用 this.$store.getters

表单验证

下面提到的库,都不能完全满足我的需求。有时候需要在模版里手动验证。

vue-validator

在我迁移时,这个插件还没发布正式的 3.0 版本,官方也不建议用在生产环境。所以我选择了下面的库。

vuerify

总结

上面只是梳理了一下迁移时,遇到的一些常见问题,并非所有。大多数问题官方文档已经包括,请认真阅读官方迁移指南。

微信扫描查看或分享
加入我们