v-for、v-if 不能一起使用的原因
来源：5-2 vue真题演练1-v-for为何使用key
慕移动8175742
2021-04-14
老师您好:
先描述根据课上以及其他资料查询结果原因是: v-for 优先级更高, v-if 条件变量变更会导致循环数据全部遍历, 影响性能解决方法: (1). 将 if 条件放到父级 (2). computed 先过滤, 再做 for 循环数据
这里还是有一些疑问, 不清楚性能具体耗损在哪里渲染流程我理解是: 执行 render() -> 收集数据响应式 / 返回vnode -> 渲染数据更新数据: 修改数据 -> 触发响应式 -> 执行 render() -> 返回新 vnode -> 旧 vnode、新 vnode 进行 patch -> 渲染
那么这里的 for 循环只是在执行 render() 时触发, 且仅触发一次. 是 JS 代码的 for 循环, 而不是 DOM 渲染循环多次. JS 执行速度应该是很快的. 不明白性能耗损在哪里
(1). 将 if 放到父级. 这个能理解. 是更好的代码书写
(2). 但很多资料描述先使用 computed 进行过滤, 那么本质上还只是多了一次 JS 的 for 循环. 这里能省性能吗 ?
上述就是问题描述, 哪里理解不对, 麻烦老师指出
麻烦了, 多谢
写回答
1回答
-
你如果说 js 计算很快，损耗性能无感知 —— 这个没毛病，确实现代浏览器都很强大，js 效率越来越高。多计算一遍，也不是啥大问题。
但就从代码逻辑角度来看，for 和 if 放在一起，就会很混乱，可读性变的很差。而把 for 和 if 分开的话，那就清晰多了。
就从这一点来看，也应该把 for 和 if 分开。
012021-04-22
相似问题