小案例诠释computed计算属性

这个小案例的需求是：

1. 切换到全部就只显示全部的内容

2. 切换到未结算就只显示未结算的内容

3. 切换到结算就只显示结算的内容

4. 切换到失效就只显示失效的内容

一、页面布局

<template>
  <div class="home">
    <el-tabs v-model="status" @tab-click="handleClick">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane label="未结算" name="1"></el-tab-pane>
      <el-tab-pane label="已结算" name="2"></el-tab-pane>
      <el-tab-pane label="失效" name="3"></el-tab-pane>
    </el-tabs>
    <div class="content" v-for="item in tabContent" :key="item.id">
      <p>{{item.name}}</p>
      <p>{{fillStatus(item.status)}}</p>
    </div>
  </div>
</template>
<style lang="scss">
  .home {
    max-width: 300px;
    margin: 100px auto;
    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      margin-bottom: 15px;
      border-bottom: 1px solid #e4e7ed;
    }
  }
</style>
复制代码

数据data，其中listData模拟当时后端的数据

data () {
    return {
      listData: [{
        id: 1,
        name: '产品1',
        status: '2'
      }, {
        id: 2,
        name: '产品2',
        status: '1'
      }, {
        id: 3,
        name: '产品3',
        status: '3'
      }, {
        id: 4,
        name: '产品4',
        status: '3'
      }],
      status: '0', // 未结算1；已结算2；失效3
    }
  }
复制代码

此时的页面展示效果是这样的

二、把status 未结算1，已结算2，失效3，相对应数字转换文字

methods: {
    fillStatus (status) {
      if (status === '1') return '未结算'
      if (status === '2') return '已结算'
      if (status === '3') return '失效'
    }
  }
复制代码

相应的在html里传参

<div class="content" v-for="item in listData" :key="item.id">
  <p>{{item.name}}</p>
  <p>{{fillStatus(item.status)}}</p>
</div>
复制代码

此时页面效果

三、1. 切换到全部就只显示全部的内容；2. 切换到未结算就只显示未结算的内容；3. 切换到结算就只显示结算的内容；4. 切换到失效就只显示失效的内容（本文章核心）

computed计算属性，可以在页面上进行双向数据绑定展示出结果或者用作其他处理，依赖数据data的变化而变化，有缓存，即只在需要时更新。

watch数据监听，监听数据data的变化，起到 观察员 的作用，无缓存。

在这个小案例中 computed得到一个很好的诠释。

computed: {
    tabContent () {
      return this.listData.filter(item => {
        if (this.status === '0') return item
        return item.status === this.status
      })
    }
  }
复制代码

最后在这里贴上完整的代码：

<template>
  <div class="home">
    <el-tabs v-model="status" @tab-click="handleClick">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane label="未结算" name="1"></el-tab-pane>
      <el-tab-pane label="已结算" name="2"></el-tab-pane>
      <el-tab-pane label="失效" name="3"></el-tab-pane>
    </el-tabs>
    <div class="content" v-for="item in tabContent" :key="item.id">
      <p>{{item.name}}</p>
      <p>{{fillStatus(item.status)}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      listData: [{
        id: 1,
        name: '产品1',
        status: '2'
      }, {
        id: 2,
        name: '产品2',
        status: '1'
      }, {
        id: 3,
        name: '产品3',
        status: '3'
      }, {
        id: 4,
        name: '产品4',
        status: '3'
      }],
      status: '0' // 未结算1；已结算2；失效3
    }
  },
  computed: {
    tabContent () {
      return this.listData.filter(item => {
        if (this.status === '0') return item
        return item.status === this.status
      })
    }
  },
  methods: {
    fillStatus (status) {
      if (status === '1') return '未结算'
      if (status === '2') return '已结算'
      if (status === '3') return '失效'
    },
    // tab 被选中时触发
    handleClick (val) {
      this.status = val.index
      console.log(val.index)
    }
  }
}
</script>
<style lang="scss">
  .home {
    max-width: 300px;
    margin: 100px auto;
    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      margin-bottom: 15px;
      border-bottom: 1px solid #e4e7ed;
      &:last-child {
        border-bottom: none;
      }
    }
  }
</style>

复制代码

进入前端这一行，是大学在图书馆的一本小程序的书籍懵懵懂懂的照着书籍的案例敲出代码，初入社会，一切从0开始，先是基础课再到实操课，以及中间持续翻看文档。但无论是何种学习方式，离不开官方文档，离不开自己独立的思想，以及最重要的实操。我觉得程序员这个行业，最重要的就是实操，bug写多了，坑踩多了，经验就多了，能力也就上去了。
我想，我的压力主要是因为自己的经验不足，比如一个看上去较小的bug，感觉20多分钟就能搞定，但最后弄了3个多小时。

今天的你，放下浮躁，放下慵懒，放下三分钟热度，放空经不住诱惑的大脑，放开容易被任何事物吸引的眼睛，静下心来，写bug了吗？

哈哈哈，今天又是美好快乐的一天。