Vue3的computed用法

本文介绍: 如果传递给 computed 的是一个函数，那么这就是一个 get t e r 函数，我们只能获取它的值，而不能直接修改它。如果需要修改计算属性的值，计算属性传入一个对象，包含 get 和 set 函数，就能实现创建一个可以修改的计算属性。上述的例子只是单纯的计算两个数的和，可以直接引入 computed 方法在方法里进行计算。计算属性不是只可以写一个的，可以写任意多个计算属性，代码如上所示，效果如下。如果我们直接修改计算属性的值会报错误。

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

（1）一个计算属性

&lt;template&gt;
    <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>