- 为什么 v-for 和 v-if 不建议一起使用 ?
总结:
在
Vue2中,v-for的优先级要比v-if要高, 如果同时使用的话,每次循环都需要v-if去判断, 存在大量的判断会极大的降低项目质量
Vue3中v-if的优先级要比v-for要高V2中为了避免这个问题,可以将v-if写在v-for的外层(包裹一层template用作v-if判断), 如果条件出现在内部, 可通过计算属性 computed 提前过滤掉那些不需要显示的选项
v-if和v-for永远不要一起使用!!!
- v-for中 key 的作用
总结:
v-for默认使用的是 就地复用策略, 列表修改的时候,会根据 key 值去判断某个值是否相等, 如果修改, 重新渲染这一项, 否则复用之前的元素, 如果不绑定key的话,每次修改某一条数据,都会重新渲染所有数据,会导致大量内存的浪费, 如果绑定了key,每次修改某一条数据的时候,就只会重新渲染改条数据的变化,节省了大量的内存。不要使用
index作为key使用,如果是在数据的最后添加一条数据的时候使用index作为key没有问题,但是在中间插入数据的话,就会导致多条数据的重新渲染。真正的原因参考 Virtual DOM 使用 Diff 算法实现的原因