• v-for
    • v-for 遍历数组时的参数顺序 变更
      • 升级方式
    • v-for 遍历对象时的参数顺序 变更
      • 升级方式
    • $index and $key 移除
      • 升级方式
    • track-by 替换
      • 升级方式
    • v-for 范围值 变更
      • 升级方式

    v-for

    v-for 遍历数组时的参数顺序 变更

    当包含 index 时,之前遍历数组时的参数顺序是 (index, value)。现在是 (value, index) ,来和 JavaScript 的原生数组方法 (例如 forEachmap) 保持一致。

    升级方式

    在代码库中运行迁移工具来找出那些使用旧有参数顺序的示例。注意,如果你将你的 index 参数命名为一些不通用的名字 (例如 positionnum),迁移工具将不会把它们标记出来。

    v-for 遍历对象时的参数顺序 变更

    当包含 property 名称/key 时,之前遍历对象的参数顺序是 (name, value)。现在是 (value, name),来和常见的对象迭代器 (例如 lodash) 保持一致。

    升级方式

    在代码库中运行迁移工具来找出那些使用旧有参数顺序的示例。注意,如果你将你的 key 参数命名为一些不通用的名字 (例如 nameproperty),迁移工具将不会把它们标记出来。

    $index and $key 移除

    已经移除了 $index$key 这两个隐式声明变量,以便在 v-for 中显式定义。这可以使没有太多 Vue 开发经验的开发者更好地阅读代码,并且在处理嵌套循环时也能产生更清晰的行为。

    升级方式

    在代码库中运行迁移工具来找出使用这些移除变量的示例。如果你没有找到,也可以在控制台错误中查找 (例如 Uncaught ReferenceError: $index is not defined)。

    track-by 替换

    track-by 已经替换为 key,它的工作方式与其他属性一样,没有 v-bind 或者 : 前缀,它会被作为一个字符串处理。多数情况下,你需要使用具有完整表达式的动态绑定 (dynamic binding) 来替换静态的 key。例如,替换:

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

    你现在应该写为:

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

    升级方式

    在代码库中运行迁移工具来找出那些使用track-by的示例。

    v-for 范围值 变更

    之前,v-for="number in 10"number 从 0 开始到 9 结束,现在从 1 开始,到 10 结束。

    升级方式

    在代码库中使用正则 /\w+ in \d+/搜索。当出现在 v-for 中,请检查是否受到影响。