vue3的计算属性computed和 vue2 computed 的有什么区别，使用，计算属性传参？

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函数，获取计算属性的值

最后
--

> 最后写上我自己一直喜欢的一句名言：`世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它`
> ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6L3lnVUFXMUlsN2FRMlNlT2VueEF1QTMxNDlEQmRDMlU0bzBpY21pYVloa2szeXVFZmNydGV4MGYxSWljdFJGNU9RYUw5TWJHb0hiTmtWQlBQUGliTng0RWJpY0EvNjQw?x-oss-process=image/format,png)