Vue3 Computed属性

一、引入computed

import { computed } from 'vue';

二、计算属性的使用 

（一）计算属性简写形式

计算属性 = computed( ()=> {  return 计算属性值  })

 setup() {
    let nums = reactive({
      ten: 0, // 十位
      unit: 0, // 个位
    });

    nums.sum = computed(() => {
          return nums.ten * 10 + nums.unit;
    })

    return {
      nums,
    };
  },

（二）计算属性完整写法

这种写法用于计算属性需要修改的场景，能够自定义get和set来对值进行操作。

计算属性 = computed({

        get () {  retrun 读取值  },

        set (value) {  // 对修改值value进行操作  }

})

  setup() {
    let nums = reactive({
      ten: 0, // 十位
      unit: 0, // 个位
    });

    nums.sum = computed({
      get() {
        return nums.ten * 10 + nums.unit;
      },
      set(value) {
        nums.ten = parseInt(value / 10);
        nums.unit = value % 10;
      }
    })

    return {
      nums,
    };
  },