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

从 Vue 1.x 迁移

2024-08-21 04:09:12   222人阅读

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的新数组方法：forEach，map 保持一致。

升级方式

运行 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 迁移


联系
我们