07 VUE-计算属性

问题1: js原生变量num值, 来自a与b变量的和如何写?

在模板中可以直接通过插值语法显示一些data中的数据，有些情况下我们需要对数据进行转化或者计算后显示，我们可以使用computed选项来计算，这时有些小伙伴可能就会问，我直接定义函数再调用不就行了，为什么还要整一个计算属性呢？这个问题在下边再做解释，我们先来看一下计算属性怎么用！

1 概念

2计算属性缓存

1）、methods和computed看起来都能实现我们的功能

2）、计算属性会进行缓存，如果多次使用时，计算属性只会调用一次

例如：

<template>
  <div>
    <!-- 原始方式，该方式面对数据计算时比较繁琐，不推荐使用 -->
    <p>名字：{{ name }} 工作：{{ job }}</p>
    <!-- methods方式，每获取一次数据就调用一次函数 -->
    <p>{{ getInfo1() }}</p>
    <p>{{ getInfo1() }}</p>
    <p>{{ getInfo1() }}</p>
    <p>{{ getInfo1() }}</p>
    <!-- computed方式，当数据没有发生变化时，仅调用一次，会将数据进行缓存 -->
    <p>{{ getInfo2 }}</p>
    <p>{{ getInfo2 }}</p>
    <p>{{ getInfo2 }}</p>
    <p>{{ getInfo2 }}</p>
    <p>{{ getInfo2 }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "麦迪",
      job: "NBA球星",
    };
  },

  methods: {
    getInfo1: function () {
      console.log("methods");
      return "名字：" + this.name + "工作：" + this.job;
    },
  },

  computed: {
    getInfo2: function () {
      console.log("computed");
      return "名字：" + this.name + "工作：" + this.job;
    },
  },
};
</script>

<style>
</style>

3 案例：计算总价和均价

4 计算属性完整写法

例如：

如果是省略写法， 并且进行了设置数据， 回报错。

计算属性的完整写法其实是其中包含了 getter 和 setter 方法，声明一个fullName对象，因为我们一般只获取值，所以会将其省略写成上边案例的方式，我们在获取数据时会调用get方法，设置数据时会调用 set方法。

目标: 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法

5 案例： 小选影响全选

<template>
  <div>
    <span>全选:</span>
    <!-- 4. v-model 关联全选 - 选中状态 -->
    <input type="checkbox" v-model="isAll"/>
    <button @click="btn">反选</button>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <!-- 3. 对象.c - 关联 选中状态 -->
        <input type="checkbox" v-model="obj.c"/>
        <span>{{ obj.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
// 目标: 小选框 -> 全选
// 1. 标签+样式+js准备好
// 2. 把数据循环展示到页面上
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  // 5. 计算属性-isAll
  computed: {
    isAll: {
      set(val){
        // 7. 全选框 - 选中状态(true/false)
        this.arr.forEach(obj => obj.c = val)
      },
      get(){
        // 6. 统计小选框状态 ->  全选状态
        // every口诀: 查找数组里"不符合"条件, 直接原地返回false
        return this.arr.every(obj => obj.c === true)
      }
    }
  },
  methods: {
    btn(){
      // 8. 让数组里对象的c属性取反再赋予回去
      this.arr.forEach(obj => obj.c = !obj.c)
    }
  }
};
</script>

<style>
</style>