第六章 Vue计算属性之computed

一、概述

二、computed简写的代码

三、computed简写的运行效果

四、computed完整写法

五、computed完整写法的代码

六、computed完整写法运行效果

一、概述

**概念：**computed基于现有的数据，计算出最终值。如果依赖的数据发生变化，将自动重新计算。

语法：

① 声明在 computed 配置项中，一个计算属性对应一个函数

② 使用起来和普通属性一样使用 {{ 计算属性名 }}

注：计算属性 → 可以将一段求值的代码进行封装。

二、computed简写的代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 240px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>骑行队公路车品牌统计清单</h3>
    <table>
      <tr>
        <th>品牌系列名</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}辆</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得公路车总数 -->
    <p>公路车总数：{{ totalCount }} 个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '崔克马东9', num: 6 },
          { id: 2, name: '闪电SL8', num: 2 },
          { id: 3, name: '梅花C68', num: 4 },
          { id: 4, name: 'Cervelo S5', num: 7 }
        ]
      },
      computed: {
        totalCount () {
          // 基于现有的数据，编写求值逻辑
          // 计算属性函数的内部可以直接通过this访问到app实例 this.list
          // 需求：对 this.list数组里面的num进行求和（使用到reduce函数），其中sum为总和item为元素项0为起始总和赋值给sum
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>
</body>
</html>

三、computed简写的运行效果

四、computed完整写法

computed计算属性默认是简写，只能读取访问，不能 "修改"。

如果要 "修改" → 需要写计算属性的完整写法。

五、computed完整写法的代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    姓<input type="text" v-model="lastName"><br>
    名：<input type="text" v-model="firstName"><br>
    <input type="text" v-model="fullName"><br>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '哲晓',
        lastName: '王',
      },
      computed: {
        // 简写 -> 只有获取逻辑，没有设置/修改的逻辑
        // fullName () {
        //   return this.lastName + this.firstName
        // }

        // 完整写法 -> 获取 + 设置
        fullName: {
          // 当fullName计算属性被获取求值时，执行get（有缓存），会将返回值作为求值的结果
          get () {
            return this.lastName + this.firstName
          },
          // 当fullName计算属性被赋值修改时，执行set，修改的值传递给set方法的形参
          set (value) {
            this.firstName = value.slice(1)
            this.lastName = value.slice(0,1)
          }
        }
      }
    })
  </script>
</body>
</html>

六、computed完整写法运行效果

注：实际我们在项目开发过程中，遇到需要同时获取和修改的情况比较少，因此大部分情况下，简写就可以。