- 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 中,请检查是否受到影响。
