Vue性能优化篇之为什么v | 您所在的位置:网站首页 › will和can能一起用吗 › Vue性能优化篇之为什么v |
本人已参与「新人创作礼」活动,一起开启掘金创作之路。 前言在VScode中,把v-for和v-if写在一起,会直接报错提示你不能同时使用 v-if和v-for不能同时的原因精准概括就是 : v-for的执行优先比v-if要高 举个例子 export default { name: "IndexCom", data(){ return { list:[1,2,3,4,5,6,7,8,9,10] //需要遍历的数据 } } };上面的这组代码和下面这组代码是等价的 //第1次判断 //第2次判断 //第3次判断 //第4次判断 //第5次判断 //第6次判断 //第7次判断 //第8次判断 //第9次判断 //第10次判断 export default { name: "IndexCom", data() { return { list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], }; }, };以上面这组list为例子。我们会发现。循环了10次的数据,每一次,都需要进行v-if的判断。循环10次,判断10次,如果需要循环1000次呢,那也需要判断1000次。而v-if的判断相对的比较耗费性能。大量的判断会极大的降低项目质量。 如何避免这个问题? 方法一在v-if不依赖v-for的前提下,我们可以将v-if写在v-for的外层,这样就可以让v-if判断优先 还是以上面的代码片段为例子↓ 、 export default { name: "IndexCom", data(){ return { list:[1,2,3,4,5,6,7,8,9,10] } } }; 方法二当v-if的判断条件依赖于v-for的某个值时(item,index),我们则可以使用如下方法 export default { name: "IndexCom", data(){ return { list:[1,2,3,4,5,6,7,8,9,10] } }, computed:{ //1. 在computed里先做好判断,这里过滤的成本远比v-if的成本低 ListArr(){ return this.list.filter((_,index) => index === 1) } } };这种方法不在dom上去判断是否显示,直接在计算属性(computed)上做好过滤,dom上(template中)直接遍历已经被过滤之后的计算属性。从计算成本上来说,在计算属性中过滤会比在dom中判断是否显示更低。 以上内容针对vue2版本,vue3是可以一起用的,vue3更新了优先级,v-if高于v-for 总结 v-if不能和v-for一起使用的原因是v-for的优先级比v-if高,一起使用会造成性能浪费 解决方案有两种,把v-if放在v-for的外层或者把需要v-for的属性先从计算属性中过滤一次 v-if和v-for的优先级问题在vue3中不需要考虑,vue3更新了v-if和v-for的优先级,使v-if的优先级高于v-for |
CopyRight 2018-2019 实验室设备网 版权所有 |