浪淘沙

V1

2022/08/04阅读:10主题:萌绿

Vue2 如何优雅的解决v-for和v-if同时出现

写在前面

对于 vue 2.0+ 我们都知道v-for 的优先级 高于 v-if ,因此在项目中如果针对同一个元素同时使用 v-for 和 v-if 那么编辑器便会发出警告,虽然程序仍能正常运行、界面显示也没有问题,但是从开发规范和性能上来讲,这种操作通常是不建议和不被允许的。

那么如何合理的规避这个问题呢?

  • 答案就是使用 computed
  • 或在父元素上使用v-if,提升v-if的优先级。(具体情况需视数据结构而定)

如何操作且听我慢慢道来:

注: Vue 3.0 已经调整了v-if和v-for 的优先级,故不存在渲染性能问题。

为什么不建议 v-for 和 v-if 同时使用?

前文提到在 vue 2.0+ 中 v-for 的优先级 高于 v-if ,这段话如何理解呢?假设我有以下数组需要通过v-for渲染到页面。其中是show用于控制元素是否显示。

[
  {  i0 , show:true },
  {  i1 , show:false },
  {  i2 , show:false },
  {  i3 , show:true },
  {  i4 , show:true }
]

代码执行过程如下草图所示,可见在执行过程中,元素经历了先创建后剔除的过程,当数据量达到一定数量级时,会对性能造成显著影响。 在这里插入图片描述

使用computed 解决

对于上述数据结构,可通过computed提前剔除不需要显示的元素,从而代替v-if指令,实现显隐控制。代码片段如下:

// script
  data() {
    return {
  list:[
    {  i0 , show:true },
    {  i1 , show:false },
    {  i2 , show:false },
    {  i3 , show:true },
    {  i4 , show:true }
  ]
    };
  },

 computed:{
 list_show(){
  return this.list.filter(item=>item.show)
 },
 }

// template
<p  v-for="item in list_show" :key="item.i">{{item.i}} </p>

提高v-if的优先级

对于某些特定的数据结构,可以使v-if作用于v-for的父元素,从而达到提升v-if优先级的目的。数据格式及实现方案见下方伪代码

通常使用 <template> </template> 作父元素包裹 v-for元素

// script
  data() {
    return {
  list:{
           show:false,
           data:[0,1,2,3,4]
  }
    };
  },

// template
<template v-if="list.show">
 <p  v-for="item in list.data" :key="item">{{item}} </p>
</template> 

结语

本文通过伪代码的形式,介绍了Vue 2项目中解决v-for和v-if冲突的两种方案,具体使用何种方法需要视业务需求和数据结构而定


🔴 点击下方链接,关注我的个人公众号,获取更多优质有趣的内容。

🔴前端知识营地


分类:

前端

标签:

Vue.js

作者介绍

浪淘沙
V1