首页 > 代码库 > 从 Vue 1.x 迁移

从 Vue 1.x 迁移

FAQ

哇,非常长的一页!是否意味着 Vue2.0 已经完全不同了呢,是否需要从头学起呢,Vue1.0 的项目是不是没法迁移了?

非常开心地告诉你,并不是! 几乎90%的 API 和核心概念都没有变。因为本节包含了很多详尽的阐述以及许多迁移的例子,所以显得有点长。不用担心,你也不必从头到尾把本节读一遍!

怎么开始做项目迁移?

  1. 从运行 migration helper 这个工具开始。我们非常谨慎地把一个高级 Vue 开发工具简化并重新编译成了一个命令行工具。当这个工具发现了一个弃用的用法之后,就会给出通知和建议,并附上关于详细信息的链接。

  2. 然后,看看侧边栏给出的关于这一页的内容。如果你发现有的地方有影响,而该工具没有给出提示的,请检查并解决一下该项。

  3. 如果有测试的话,测试一边看看还有什么问题。如果没有测试的话,打开 app,随机翻一下,看一下有什么报错或者警告信息。

  4. 至此,你的 app 基本已经迁移完毕了。如果你有更多想了解的,可以阅读一下本节剩下的部分。

从1.0 迁移到2.0要花多长时间?

取决于以下几个方面:

  • 要迁移的 app 的规模。(小到中型的基本上一天内就可以搞定)

  • 为了耍耍 Vue2.0 的新功能分心了多少次。 ??  不是说你们,我们构建 Vue2.0 的时候经常发生这种事。

  • 使用了哪些弃用的功能。基本上大部分弃用的功能可以通过 find-and-replace 来实现升级,但有一些还是要花点时间。如果你没有遵循最佳实践,那么 Vue2.0 会强迫你去遵循。这有利于项目的长期运行,但是也意味着重构(也许有些需要重构的东西已经过时)。

迁移到 Vue 2 ,我也需要更新 Vuex 和 Vue-Router ?

只有 Vue-Router 2 是可编译的,可以遵循 Vue-Router 迁移路径 来处理。幸运地是, 大多数应用不含有许多路由代码,所以迁移不用超过一小时。

对于 Vuex , 甚至 0.8 版本和 Vue 2 一起都是可以编译的,所以不必强制更新。 促使你立即更新的理由是 Vuex 2 有更先进的功能,比如模块和减少的样板文件。

模板

片段实例 移除

每个组件有且仅有一个根节点。不再支持片段实例,如果你有这样的模板:

<p>foo</p>
<p>bar</p>

最好把它包裹到一个简单的容器里面去:

<div>
  <p>foo</p>
  <p>bar</p>
</div>

升级方式

升级后,为你的 app 运行端对端测试 ,并关注关于多个根节点的console warnings。

生命周期钩子

beforeCompile 移除

用 created 钩子来代替。

升级方式

运行 migration helper 工具找到所有使用这个钩子的实例

compiled 替换

用 mounted 钩子来代替。

升级方式

运行 migration helper 工具找到所有使用这个钩子的实例

attached 移除

依赖其它钩子使用自定义的 dom 内部方法,例如:

attached: function () {
  doSomething()
}

现在可以这样做:

mounted: function () {
  this.$nextTick(function () {
    doSomething()
  })
}

升级方式

运行 migration helper 工具找到所有使用这个钩子的实例

detached 移除

用自定义的 dom 内部的其他钩子代替,例如:

detached: function () {
  doSomething()
}

可以用以下方式代替:

destroyed: function () {
  this.$nextTick(function () {
    doSomething()
  })
}

升级方式

运行 migration helper 工具找到所有使用这个钩子的实例

init 换名

用新的 beforeCreate 钩子代替,他们本质上是一样的。为了与其他生命周期的钩子命名保持一致性,所以重新命名了这个钩子。

升级方式

运行 migration helper 工具找到所有使用这个钩子的实例

ready 替换

使用新的 mounted 钩子代替,应该注意的是,通过使用 mounted 钩子,并不能保证该实例已经插入文档。所以还应该在钩子函数中包含 Vue.nextTick/vm.$nextTick 例如:

mounted: function () {
  this.$nextTick(function () {
    // 保证 this.$el 已经插入文档
  })
}

升级方式

运行 migration helper 工具找到所有使用这个钩子的实例

v-for

v-for 数组参数的顺序 改变

当含有 index 时,以前传递的参数顺序是:(index, value)。现在变成了:(value, index) ,这样可以与js的新数组方法:forEachmap 保持一致。

升级方式

运行 migration helper 来找到使用弃用参数顺序的实例。注意,该工具将不会标记以 position 或者 num 来命名 index 参数。

v-for 对象参数的顺序 改变

当包含 key 时,对象的参数顺序是 (key, value)。现在改为了 (value, key),这样可以和通用的对象迭代器(比如 lodash 的迭代器)保持一致。

升级方式

运行 migration helper 来找到使用弃用参数顺序的实例。注意,该工具将不会标记以 name 或者 property 来命名 key 参数。

$index and $key 移除

隐式申明的 $index 的 $key 两个变量在新版里面已经弃用了,取代的是在 v-for 中显式地申明。这可以使无经验的 Vue 开发者更好地理解代码,同样也可以使得在处理嵌套循环时更加清晰。

升级方式

运行 migration helper 来找到使用弃用变量的实例。如果有些没有找到,也可以参考控制台警告信息 比如 Uncaught ReferenceError: $index is not defined

track-by 替换

track-by 被 key取代,和其他参数一样,如果没有 v-bind或者: 前缀,它将被作为一个字符串。大多数情况下, 我们想要能够动态绑定完整的表达式,而不是一个 key。例如:

<div v-for="item in items" track-by="id">

现在应该写成:

<div v-for="item in items" v-bind:key="item.id">

升级方式

运行 migration helper 找到含 track-by的实例。

v-for 排序值 改变

显然 v-for="number in 10" 将使得 number 从0到9迭代,现在变成了从1到10。

升级方式

以正则 /\w+ in \d+/搜索整个代码,当出现在 v-for里面时,检查一下,对你是否有影响。

Props

coerce Prop的参数 移除

如果需要检查 prop 的值,创建一个内部的 computed 值,而不再在 props 内部去定义,例如:

props: {
  username: {
    type: String,
    coerce: function (value) {
      return value
        .toLowerCase()
        .replace(/\s+/, ‘-‘)
    }
  }
}

现在应该写为:

props: {
  username: String,
},
computed: {
  normalizedUsername: function () {
    return this.username
      .toLowerCase()
      .replace(/\s+/, ‘-‘)
  }
}

这样有一些好处:

  • 你可以对保持原始 prop 值的操作权限。
  • 通过给予验证后的值一个不同的命名,强制开发者使用显式申明。

升级方式

运行 migration helper 工具找出包含 coerce 选项的实例。

从 Vue 1.x 迁移