Vue.js 2.0 迁移指南

小芋头君43
3,127 阅读2分钟

前言

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

注意

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

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

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

迁移指南

官方文档

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

迁移工具

官方提供了 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
  • 属性内部的计算插值已经无法使用
// 可用计算属性实现 

  
// =>
  • 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')
          }
      ]
    },
  ]
});

跳转方式

  • 声明式
  • 编程式
首页

数据获取方式变更

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

导航参数的类型差异

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

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

vuex

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

表单验证

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

vue-validator

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

vuerify

总结

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

avatar
文章
阅读
粉丝