转载

Vue.js 2.0 迁移指南

前言

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

注意

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

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

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

迁移指南

官方文档

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

官方文档
翻译文档

迁移工具

官方提供了 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 修饰符
- 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 时。 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 版本，官方也不建议用在生产环境。所以我选择了下面的库。

文档
examples
3.0 bug

vuerify

文档

总结

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

原文 http://f2e.souche.com/blog/vue-js2-0qian-yi-zhi-nan/

正文到此结束

所属分类：编程技术

本文标签： 代码 example 数据总结 UI 参数 id 插件 IO js value ORM 翻译 App Action CTO http 需求 src
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Vue.js 2.0 迁移指南

前言

注意

迁移指南

官方文档

迁移工具

vue

v-model

过滤器

router

跳转方式

数据获取方式变更

导航参数的类型差异

vuex

表单验证

vue-validator

vuerify

总结

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流