v-for 和 v-if 联合使用在 Vue2 和 Vue3 的不同

爱被打了一巴掌 2024-05-24 04:31 37阅读 0赞

## `v-for` 和 `v-if` 联合使用在 `Vue2` 和 `Vue3` 的不同 ##

### 在 `Vue2` ###

其实在 `Vue` 中关于 `v-for` 和 `v-if` 的讨论网上已经很多了, 不过结论都是 `Vue2` 的. 先说结论的话就是?`v-for` 的优先级比 `v-if` 高, 但是不建议两者放在一起使用?. 先看代码

export default {
        
      data() {
        
        return {
        
          fruits: [
            {
        
              id: "001",
              name: "apple",
              mature: true
            },
            {
        
              id: "002",
              name: "banana",
              mature: false
            },
            {
        
              id: "003",
              name: "grape",
              mature: true
            }
          ]
        };
      }
    };

其实在写代码时 `ESLint` 就会提示 `v-for` 和 `v-if` 不要一起使用. 反而建议我们通过计算属性来过滤掉 `v-if` 为假的那些值.  
![在这里插入图片描述][518167ebfef6449a8f765f475edbb9bd.png_pic_center]

如果一意孤行也不会报错, 不过页面最终展示如下, 也就是 `v-for` 优先级高于 `v-if` 三条都渲染了, 但是第二个因为不满足 `v-if` 而不存在.  
![在这里插入图片描述][9ecaa36ad7354044adc6e95da3f1370f.png_pic_center]

⚡顺带说一嘴, 如果用 `v-show` 是一样的, 不过这时 `ESLint` 没有红线提示.  
![在这里插入图片描述][3dd8a96f2c08492a9b56d1d6afebc275.png_pic_center]

### 在 `Vue3` ###

然而, 在 `Vue3` 中 `v-for` 和 `v-if` 发生了变化. ?直接报错无法从 `undefined` 上读取 `mature` 属性.  
![在这里插入图片描述][5073440ed19b47a39d1c2e5bc1499ffc.png_pic_center]

我猜大概率是因为 `v-if` 的优先级高于 `v-for`, 然后 item 并没有定义所以为 `undefined`, 导致的报错, 于是修改了一下代码, 直接让 `v-if` 为真

列表出现了, 猜想成立! [?官网介绍在这里(英文)?][Link 1]  
![在这里插入图片描述][d9074ac33f05469f9c2054c345b7cf1a.png_pic_center]

谢谢你看到这里, 祝你面试顺利?

[518167ebfef6449a8f765f475edbb9bd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/4463e3d8f9374fcf92084dfa0e66de71.png
[9ecaa36ad7354044adc6e95da3f1370f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/be648fe699cf4e60b33299a46295c8b9.png
[3dd8a96f2c08492a9b56d1d6afebc275.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/a4528a53443244a48ae3473086c459cf.png
[5073440ed19b47a39d1c2e5bc1499ffc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/937d3fb6fea8412ca9396016e595f577.png
[Link 1]: https://vuejs.org/guide/essentials/list.html#v-for-with-v-if
[d9074ac33f05469f9c2054c345b7cf1a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/43f5de95846e4d14ad61ab1b811fd54b.png