您现在的位置是：网站首页> 编程资料编程资料

Vue3中v-if和v-for优先级实例详解_vue.js_

2023-05-24 323人已围观

简介 Vue3中v-if和v-for优先级实例详解_vue.js_

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

那么,我们举个例子说明为啥不推荐

它实际经过的运算是这样的

this.list.map(function (item,index) { if (index===9) { return item } })

因此哪怕我们只渲染出一小部分的元素，也得在每次重渲染的时候遍历整个列表，不论是否发生了变化。

不建议这样做的原因就是比较浪费性能

Vue2 推荐的改进方案也是比较简单,就是采用计算属性去生成你要遍历的数组

如下

从计算成本上来说，在计算属性中过滤会比在dom中判断是否显示更低。

当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。

那么是不是就可以鼓励大家这样使用呢?很显然不是,官方文档仍然不推荐同时使用,我们看下为什么

同样的,我们仍然使用上面例子做分析

由于 v-if 优先级高,导致页面什么也不会渲染,控制台还有报错

[Vue warn]: Property "index" was accessed during render but is not defined on instance.

当然还有一些其它用法例如这种,可以显示数据,只是会一些Vue warn的警告

这种方法也不是最好的,官方推荐的写法是这样的, 把 v-for 移动到容器元素上,例如ul,ol 或者外面包裹一层 template

但如果想要有条件地跳过循环的执行，那么可以将v-if置于外层元素或者template上。

例如这样

1.永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

2.如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

3.如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项

computed: { items: function() { return this.list.filter(function (item) { return item.isShow }) } }

到此这篇关于Vue3中v-if和v-for优先级详解的文章就介绍到这了,更多相关Vue3 v-if和v-for优先级内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: