Vue3的computed用法及說明

更新時間：2025年12月17日 09:13:02 作者：小儲今天暴富了

文章介紹了如何在Vue.js中使用計算屬性,包括只計算不修改值的情況和可以修改的計算屬性,對于只計算不修改值的情況,可以直接使用computed方法,對于需要修改的計算屬性,計算屬性可以傳入一個對象,包含get和set函數

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 函數，就能實現創(chuàng)建一個可以修改的計算屬性。

代碼如下：

<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>

效果如下：