Vue.js 2.0 迁移指南

前言

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

注意

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

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

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

迁移指南

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

官方文档
翻译文档

迁移工具

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

vue-migration-helper

  • # 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修饰符
    1、helper 工具没有提供语法分析,需要自己搜索;
    2、组件上无法使用 @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 时。 index 是 String 类型

  • 当我们使用 push 方法时,indexNumber 类型

  • this.$router.push({name: 'page', params: {index: 1}});

vuex

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

表单验证

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

vue-validator

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

vuerify

总结

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

本文作者大搜车团队chuangker

© 著作权归作者所有
这个作品真棒,我要支持一下!
分析大搜车技术团队发展的点滴
2条评论

11

能否加个好友,看过你的sketch to html,但是我一直运行不起来,我的微信号fcsboy

top Created with Sketch.