一、前言
在v3出来之前，遇到这个问题，回答是统一的，肯定是for比if高，因为官方文档就是这么讲的；
在v3出来之后，回答就变了，变成if比for高；
并且官方推荐，不要将if和for放在一块使用
有如下文件：
<ul><li v-for="item in list" :key="item.id" v-if="item.id === 1"></li>
</ul>
const list = [{id:1,name:'我是1'}, {id:2,name:'我是2'}, {id:3,name:'我是4'}, {id:4,name:'我是4'}
]
二、先看vue2
function render() {with(this) {return _c('ul', _l((list), function (item) {return (item.id === 1) ? _c('li', {key: item.id}) : _e()}), 0)}
}
- 可以看到，render对list的每项进行遍历，每项进行判断
三、在看vue3
function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createElementBlock("ul", null, [(_ctx.item.id === 1)? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(_ctx.list, (item) => {return (_openBlock(), _createElementBlock("li", {key: item.id}))}), 128 /* KEYED_FRAGMENT */)): _createCommentVNode("v-if", true)]))
}
- 可以看到，直接进行了判断，如果不匹配，不对list进行遍历。也就是if会先被执行。
- 由此render可以理解到官方文档中的描述，当for和if一起使用的时候，if先执行。并且这个时候，if中的条件，会报错，因为if中的变量，没有定义。
四、文档推荐写法
- 使用template
<ul><template v-for="item in list"><li :key="item.id" v-if="item.id === 1"></li></template></ul> - 使用计算属性
<ul><li :key="item.id" v-for="item in activeList" ></li></ul>const activeList = computed(()=>{return list.filter(t=>t.active)})
到底使用推荐的那个写法？
- template写法，无疑每次还是需要去遍历，判断；
- 计算属性，对数据进行缓存，数据不变，渲染层不会重新渲染
五、总结
-
渲染层逻辑优化。开发时候，开发者经常还是写到一块，改动以后，强制必须if在上层，或者强制开发者使用template加上一层。
-
性能的提升。在v2中，假如数组很长，那么就必须对数组的每项目进行判断；而在vue3中，强制用户将显示的数组先过滤一层
本文链接：https://my.lmcjl.com/post/12666.html
展开阅读全文
4 评论