Vue3使用组件的计算属性代替v-for和v-if

Vue.js3组件的方法-优快云博客

使用Vue3组件的计算属性-优快云博客

Vue3组件计算属性的get和set方法-优快云博客

Vue3组件计算属性的缓存-优快云博客

在业务逻辑处理中，一般会使用v-for指令渲染列表的内容，有时也会使用v-if指令的条件判断过滤列表中不满足条件的列表项。实际上，这个功能也可以使用计算属性来完成。

【例3.9】  使用计算属性代替v-for和v-if（源代码\ch03\3.9.html）。

<div id="app">
    <h3>已经出库的商品</h3>
    <ul>
        <li v-for="goods in outGoodss">
            {{goods.name}}
        </li>
    </ul>
    <h3>没有出库的商品</h3>
    <ul>
        <li v-for="goods in inGoodss">
        {{goods.name}}
        </li>
    </ul>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            goodss: [
              {name: '洗衣机', isOut: false},
              {name: '冰箱', isOut: true},
              {name: '空调', isOut: false},
              {name: '电视机', isOut: true},
              {name: '电脑', isOut: false}
            ]
           }
        },
        computed:{
            outGoodss(){
                return this.goodss.filter(goods=>goods.isOut);
             },
            inGoodss(){
                return this.goodss.filter(goods=>!goods.isOut);
             }
        }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

在Chrome浏览器中运行程序，结果如图3-11所示。

从上面的示例可以发现，计算属性可以代替v-for和v-if组合的功能。在处理业务时，推荐使用计算属性，这是因为即使v-if指令的使用只渲染了一部分元素，但在每次重新渲染的时候仍然要遍历整个列表，而无论渲染的元素内容是否发生了改变。

采用计算属性过滤后再遍历，可以获得一些好处：过滤后的列表只会在goodss数组发生相关变化时才被重新计算，过滤更高效；使用v-for="goods in outGoodss"之后，在渲染的时候只遍历已出库的商品，渲染更高效。

本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。