- v-for
- v-for 遍历数组时的参数顺序 变更
- 升级方式
- v-for 遍历对象时的参数顺序 变更
- 升级方式
- $index and $key 移除
- 升级方式
- track-by 替换
- 升级方式
- v-for 范围值 变更
- 升级方式
- 升级方式
- v-for 遍历数组时的参数顺序 变更
v-for
v-for 遍历数组时的参数顺序 变更
当包含 index
时,之前遍历数组时的参数顺序是 (index, value)
。现在是 (value, index)
,来和 JavaScript 的原生数组方法 (例如 forEach
和 map
) 保持一致。
升级方式
在代码库中运行迁移工具来找出那些使用旧有参数顺序的示例。注意,如果你将你的 index 参数命名为一些不通用的名字 (例如 position
或 num
),迁移工具将不会把它们标记出来。
v-for 遍历对象时的参数顺序 变更
当包含 property 名称/key 时,之前遍历对象的参数顺序是 (name, value)
。现在是 (value, name)
,来和常见的对象迭代器 (例如 lodash) 保持一致。
升级方式
在代码库中运行迁移工具来找出那些使用旧有参数顺序的示例。注意,如果你将你的 key 参数命名为一些不通用的名字 (例如 name
或 property
),迁移工具将不会把它们标记出来。
$index and $key 移除
已经移除了 $index
和 $key
这两个隐式声明变量,以便在 v-for
中显式定义。这可以使没有太多 Vue 开发经验的开发者更好地阅读代码,并且在处理嵌套循环时也能产生更清晰的行为。
升级方式
在代码库中运行迁移工具来找出使用这些移除变量的示例。如果你没有找到,也可以在控制台错误中查找 (例如 Uncaught ReferenceError: $index is not defined
)。
track-by 替换
track-by
已经替换为 key
,它的工作方式与其他属性一样,没有 v-bind
或者 :
前缀,它会被作为一个字符串处理。多数情况下,你需要使用具有完整表达式的动态绑定 (dynamic binding) 来替换静态的 key。例如,替换:
<div v-for="item in items" track-by="id">
你现在应该写为:
<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
中,请检查是否受到影响。