vue3的computed的用法

以下提供一个简单的demo，仅供参考

demo示例

template部分

<template>
	 <div>简单只读:{
   
   { obj.computedAllNum1 }}</div>
	  <input v-model="obj.num1" />
	  <br />
	  <input v-model="obj.num2" />
	
	  <div>可读可写</div>
	  <input v-model="obj.computedAllNum1" />
	  <br />
</template>

javascript部分

<script>
import { reactive, computed } from "vue";
export default {
  name: "HelloWorld",

  setup(props, context) {
    // 计算属性
    const obj = reactive({
      num1: 1,
      num2: 2,
      computedAllNum1: "",
    });
    
    // 简单只读计算-方式一
    obj.computedAllNum1 = computed(() => {
      return obj.num1 + "-" + obj.num2;
    });

    // 可读可写的计算-方式二
    obj.computedAllNum1 = computed({
      get() {
        return obj.num1 + "-" + obj.num2;
      },
      set(value) {
        console.log(value);
        obj.num1 = value.split("-")[0];
        obj.num2 = value.split("-")[1];
      },
    });
    return { obj };
  },
};