v-if和v-for的相关问题?

87 阅读1分钟
  1. 为什么 v-for 和 v-if 不建议一起使用 ?

github

掘金

总结:

Vue2 中, v-for的优先级要比v-if要高, 如果同时使用的话,每次循环都需要v-if去判断, 存在大量的判断会极大的降低项目质量

Vue3v-if 的优先级要比 v-for 要高

V2中为了避免这个问题,可以将v-if写在v-for的外层(包裹一层template用作v-if判断), 如果条件出现在内部, 可通过计算属性 computed 提前过滤掉那些不需要显示的选项

v-if和v-for永远不要一起使用!!!

  1. v-for中 key 的作用

掘金

总结:

v-for 默认使用的是 就地复用策略, 列表修改的时候,会根据 key 值去判断某个值是否相等, 如果修改, 重新渲染这一项, 否则复用之前的元素, 如果不绑定key的话,每次修改某一条数据,都会重新渲染所有数据,会导致大量内存的浪费, 如果绑定了key,每次修改某一条数据的时候,就只会重新渲染改条数据的变化,节省了大量的内存。

不要使用 index 作为 key 使用,如果是在数据的最后添加一条数据的时候使用index作为key没有问题,但是在中间插入数据的话,就会导致多条数据的重新渲染。

真正的原因参考 Virtual DOM 使用 Diff 算法实现的原因

Diff详解