什么是计算属性：

• computed函数，是用来定义计算属性的，计算属性不能修改。

• 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

• 计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

• methods和computed看起来都可以实现我们的功能， 那么为什么还要多一个计算属性这个东西呢？ 原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次；而方法会使用一次则调用一次，因此计算属性相对而言性能更好。

• 计算属性内部this指向vm实例

一、computed 写法

1、在vue2中，computed 写法：

computed:{
  sum(){
  return this.num1+ this.num2
  }
}

2、在vue3中，computed 基本使用： 

<template>
  <div class="container">
    <div>今年：{{age}}岁</div>
    <div>后年：{{newAge}}岁</div>
  </div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
    const age = ref(16)
    // 得到后年的年龄
    const newAge = computed(()=>{
      // 该函数的返回值就是计算属性的值
      return age.value + 2
    })
    return {age, newAge}
  }
}
</script>

3、vue3当然也可以在 reactive 直接使用

import { reactive, toRefs ,computed} from "vue";
let shopNum = reactive({
      num: computed(() => {
        let nums = 0;
        obj.value.forEach((item) => {
          if (item.checked) {
            nums += item.num;
          }
        });
        return nums;
    }),
});
 return {
    ...toRefs(shopNum),
 };

二、常用的是 get 方法，获取数据，也可以使用set方法改变数据

vue2写法

computed: { 
  fullName: { 
    // getter  读取数据触发get方法
   get: function () { 
     return this.firstName + ' ' + this.lastName 
   },
   // setter 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作
   set: function (newValue) { 
     var names = newValue.split(' ') 
     this.firstName = names[0] 
     this.lastName = names[names.length - 1] 
    } 
  } 
}

vue2 computed 用get 和 set 实现全选反选

  computed: {
    checked: {
      get() {
        // 期中只要有一个不为ture 就不为ture 全部为 true 都为 true
        return this.list.every((item) => {
          return item.checked == true;
        });
      },
      //获取修改后的值
      set(val) {
        console.log(val);
        if (val) {
          // 如果为 true 的换全部为 true 
          this.list.forEach((item) => {
            item.checked = true;
          });
        } else {
          this.list.forEach((item) => {
            item.checked = false;
          });
        }
      },
      // 当计算属性的值发生改变的时候 去执行一些操作
    },
  },

vue2计算属性传参数

 <li
   v-for="(val, index) in currentPageNum"
   :key="index"
   >
   {{ getIndex(index) }}
 </li>
 computed: {
    getIndex() {
   //    返回一个函数即可
      return function(e) {
        console.log(e);
        return e + 1;
      };
    },
  },

vue3写法

<template>
  <div class="container">
    <div>今年：{{age}}岁</div>
    <div>后年：{{newAge}}岁</div>
    <!-- 使用v-model绑定计算属性 -->
    <input type="text" v-model="newAge">
  </div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
    const age = ref(16)
    // 得到后年的年龄
    // const newAge = computed(()=>{
    //   // 该函数的返回值就是计算属性的值
    //   return age.value + 2
    // })
    // 计算属性高级用法，传人对象
    const newAge = computed({
      // get函数，获取计算属性的值
      get(){
        return age.value + 2
      },
      // set函数，当你给计算属性设置值的时候触发
      set (value) {
        age.value = value - 2
      }
    })
    return {age, newAge}
  }
}
</script>

目的：让计算属性支持双向数据绑定。

总结：计算属性两种用法

• 给computed传入函数，返回值就是计算属性的值

• 给computed传入对象，get获取计算属性的值，set监听计算属性改变。