1.针对只计算不修改值的场景

（1）一个计算属性

<template>
    <input type="text" v-model="num1" />
    +
    <input type="text" v-model="num2" />
    =
    <input type="text" v-model="num3" />

</template>
<script lang="ts">
  import { defineComponent,ref,reactive,toRefs,computed } from 'vue';
  export default defineComponent({
     setup(){
        let num1=ref(1)
        let num2=ref(3)
        const num3=computed(()=>{
           return Number(num1.value)+Number(num2.value)
        })
         return{
           num1,
           num2,
           num3
         }
     }
  })
</script>

上述的例子只是单纯的计算两个数的和，可以直接引入computed方法在方法里进行计算

（2）多个计算属性 

<template>
    <input type="text" v-model="num1" />
    +
    <input type="text" v-model="num2" />
    =
    <input type="text" v-model="num3" />
    <hr>
    <input type="text" v-model="num1" />
    -
    <input type="text" v-model="num2" />
    =
    <input type="text" v-model="num4" />

</template>
<script lang="ts">
  import { defineComponent,ref,reactive,toRefs,computed } from 'vue';
  export default defineComponent({
     setup(){
        let num1=ref(3)
        let num2=ref(1)
        const num3=computed(()=>{
           return Number(num1.value)+Number(num2.value)
        })
        const num4=computed(()=>{
           return Number(num1.value)-Number(num2.value)
        })
         return{
           num1,
           num2,
           num3,
           num4
         }
     }
  })
</script>

计算属性不是只可以写一个的，可以写任意多个计算属性，代码如上所示，效果如下 

 2.可以修改的计算属性

  问题：如果我们直接修改计算属性的值会报错误

  原因：如果传递给 computed 的是一个函数，那么这就是一个 getter 函数，我们只能获取它的        值，而不能直接修改它。

   如果需要修改计算属性的值，计算属性传入一个对象， 包含get 和 set 函数， 就能实现创建一个可以修改的计算属性。代码如下：

<template>
    <input type="text" v-model="num1" />
    +
    <input type="text" v-model="num2" />
    =
    <input type="text" v-model="num3" />
    <hr>
   <button @click="updata">修改计算属性的值</button>

</template>
<script lang="ts">
  import { defineComponent,ref,reactive,toRefs,computed } from 'vue';
  export default defineComponent({
     setup(){
        let num1=ref(3)
        let num2=ref(1)
         const num3=computed({
             get(){
                return Number(num1.value)+Number(num2.value)
             },
             set(value :number){
                 num2.value=value+1
             }
         })
         const updata=()=>{
             num3.value=10
         }
         return{
           num1,
           num2,
           num3,
           updata
         }
     }
  })
</script>

效果如下：