计算属性的应用场景

从已有的数据A中计算等到的新的数据B，使用计算属性

如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。

定义格式

计算属性与data和methods同级,格式如下:

{
    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名1 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }，
        计算属性名2 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }
    }
}

computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。

○ 对需要依赖的数据，进行逻辑上的处理
○ 处理完毕后，需要return出去，返回的值就是计算属性的值

使用格式

在两个地方使用：

1. 模板
   ○ 用插值表达式 {{计算属性名}}
   ○ 用其它指令
2. 在实例内
   ○ this.计算属性名

代码演示更直观,
颠倒字符串代码演示:

  <div id="app">
    <!-- 逻辑复杂 -->
    <h3>{{msg.split('').reverse().join('')}}</h3>
    <!-- 计算属性 和data类似-->
    <h3>{{reverseMsg}}</h3>
  </div>
  <script src="./vue.js"></script>
  <script>
     {
      data () {
        return { msg: 'hi vue' }
      },
      // 声明计算属性
      computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        reverseMsg () {
          // 对依赖的数据进行处理，且进行return
          return this.msg.split('').reverse().join('')
        }
      }
    })
  </script>

在模板中使用计算属性，和使用data的方式是一样的。

○ 虽然在计算属性中声明的是函数，但是在模板中使用，当中数据来使用，不需要加括号。

问：

当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时，我们有两种解决方案：1.计算属性2.函数应该如何选择？

答：

● methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。
● computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。
○ 计算属性会做缓存，提高渲染的性能。

计算属性的完整写法

计算属性也是变量, 如果想要给计算属性直接赋值, 需要使用完整写法=>开启读写模式

语法:

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

经典场景,全选和反选

<template>
  <div>
    <span>全选:</span>
    <input
      type="checkbox"
      v-model="isAll"
    />
    <button @click="fan">反选</button>
    <ul>
      <li
        v-for="(item, index) in arr"
        :key="index"
      >
        <input
          type="checkbox"
          v-model="item['checked']"
        />
        <span>{{ item["name"] }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        {
          name: "猪八戒",
          checked: false,
        },
        {
          name: "孙悟空",
          checked: false,
        },
        {
          name: "唐僧",
          checked: false,
        },
        {
          name: "白龙马",
          checked: false,
        },
      ],
    }
  },
  methods: {
    // 方法实现
    fan () {
      this.arr.forEach((obj) => {
        obj.checked = !obj["checked"]
      })
    },
  },
  computed: {
    // 计算属性实现
    isAll: {
      set (val) {
        // 设置isAll的值的时候触发此方法, 传入要设置的值
        // val是全选框的true/false的值
        this.arr.forEach((obj) => {
          obj["checked"] = val
        })
      },
      get () {
        return this.arr.every((obj) => obj["checked"] === true)
      },
    },
//    isAll () {
//      return this.arr.every((obj) => obj["checked"] === true)
//    }
  },
};
</script>

<style>
</style>