1.v-if和v-for哪个优先级高?如何正确使用避免性能问题

最新推荐文章于 2023-08-21 14:43:35 发布

自由的音符

最新推荐文章于 2023-08-21 14:43:35 发布

阅读量339

点赞数

分类专栏： Vue 性能优化文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weCat_s/article/details/121748079

版权

Vue 同时被 2 个专栏收录

48 篇文章 5 订阅

订阅专栏

性能优化

11 篇文章 1 订阅

订阅专栏

本文探讨了Vue中v-for和v-if指令的执行顺序，通过源码分析得出v-for优先级高于v-if。当同时存在时，v-if条件判断会在每次循环中执行，可能导致性能浪费。为优化，建议在外层使用v-if进行预过滤，再内部使用v-for进行循环。

摘要由CSDN通过智能技术生成

源码：el.staticRoot=>el.once=>el.for=>el.if=>el.tag 执行顺序

在这里插入图片描述

两者同级时，渲染函数如下：

(function anonymous(
){
with(this){return_ .c('div' ,{attrs:{"id":"demo"}},[_ _c('h1' ,[_ _v("v-for和v-i f谁的优先级高?应该
如何正确使用避免性能问题? ")]),_v(" ")，
_1((children)，function(chi1d){return (isFolder)?_ .c('p' ,[_ v(_ s(chi1d.tit1e))]): e()})],2)}
})

_l包含了isFolder的条件判断

两者不同级时，渲染函数如下：

(function anonymous (
){
with(this){return_ c('div' ,{attrs:{"id":"demo"}},[_ .c('h1',[_ _v("v-for和v-if谁的优先级高?应该
如何正确使用避免性能问题? ")]),_v(" ")，
(isFo1der)?_1((chi 1dren)，function(chi1d){return . _c('p',[_ _v(_ s(child. tit1e))])}): _e()],2)}
})