快捷導(dǎo)航

Vue3?計算屬性的用法詳解

更新時間：2022年07月07日 07:57:50 作者：ed。

學(xué)過?vue2?的寶子們應(yīng)該都清楚，計算屬性這個東西在項目開發(fā)過程中使用的還是比較頻繁的，使用頻率相對來說比較高。本文就來為大家介紹一下Vue3中計算屬性的用法，需要的可以參考一下

上一篇博文說了 vue3 項目的 toRefs 函數(shù)和 toRef 函數(shù)，今天就稍微總結(jié)一下 vue3 的計算屬性，其實學(xué)過 vue2 的寶子們應(yīng)該都清楚，計算屬性這個東西在項目開發(fā)過程中使用的還是比較頻繁的，使用頻率相對來說比較高，所以說咱今天稍微總結(jié)一下 vue3 項目中的計算屬性，下面開始。

computed 計算屬性說明

computed 表示計算屬性，通常的作用是用來進(jìn)行數(shù)據(jù)處理，方便在末班中簡化書寫。

比如日常在模板中我們渲染數(shù)據(jù)的時候一般是使用 {{ }} 來進(jìn)行展示數(shù)據(jù)，但是有的時候嘞，獲取到的數(shù)據(jù)并不是我們想要的類型，我們可以在 {{ }} 中編寫表達(dá)式轉(zhuǎn)換成我們需要的類型，但是呢，這樣做簡單的還可以，如果相對復(fù)雜的格式在 {{ }} 中編寫的話就會造成模板代碼繁瑣，不易維護(hù)和閱讀，所以這并不是最好的編碼習(xí)慣，因此，vue3 也為我們提供了一些好的解決方案，計算屬性就是其中一種。

計算屬性可以幫我們將數(shù)據(jù)轉(zhuǎn)換成需要展示的數(shù)據(jù)格式，不必在模板中編寫大量的表達(dá)式進(jìn)行處理。

計算屬性使用

首先呢，使用 computed 需要引入。

import { computed } from 'vue'

引入這一個步驟是不可或缺的。

然后我們編寫一個案例，就是一個頁面有兩個輸入框，第一個輸入框的數(shù) 加上第二個輸入框的數(shù)，使用計算屬性在第三個輸入框求和。

<template>
  <div>
    <h1>computed 計算屬性</h1>
    <el-input v-model="num1" /> +
    <el-input v-model="num2" /> =
    <el-input v-model="num3" />
  </div>
</template>
<script>
  import { computed, ref } from 'vue'
  export default {
    setup() {
      const num1 = ref('')
      const num2 = ref('')
      const num3 = computed(() => {
        return Number(num1.value) + Number(num2.value)
      })
      return { num1, num2, num3 }
    }
  }
</script>
<style scoped>
  .el-input {
    width: 100px;
  }
</style>

保存刷新，輸如前兩個輸入框的值，會自動計算和展示在第三個輸入框。

這樣就實現(xiàn)了最簡單的計算屬性。

計算屬性不是只可以寫一個的，可以寫任意多個計算屬性，怎么操作呢？看代碼：

<template>
  <div>
    <h1>computed 計算屬性</h1>
    <el-input v-model="num1" /> +
    <el-input v-model="num2" /> =
    <el-input v-model="num3" />
    <hr>
    <el-input v-model="num1" /> -
    <el-input v-model="num2" /> =
    <el-input v-model="num4" />
  </div>
</template>
<script>
  import { computed, reactive, toRefs } from 'vue'
  export default {
    setup() {
      const num1 = ''
      const num2 = ''
      const all = reactive({ num1, num2 })

      // 計算屬性求和
      const num3 = computed(() => {
        return Number(all.num1) + Number(all.num2)
      })

      // 計算屬性求差
      const num4 = computed(() => {
        return Number(all.num1) - Number(all.num2)
      })
      return { ...toRefs(all), num3, num4 }
    }
  }
</script>
<style scoped>
  .el-input {
    width: 100px;
  }
</style>

保存刷新，我們看到除了求和，還可以求差。

這樣的話，就實現(xiàn)了在一個頁面實現(xiàn)多個計算屬性的操作，完全不用寫在一個計算屬性里面進(jìn)行判斷處理，很靈活，當(dāng)然了，有三個可以寫三個，有四個可以寫四個。

但是有一點需要注意！

如果我們直接修改計算屬性的值會報一個錯誤！

比如我們有一個按鈕，點擊之后把 num4 修改為 10 。

      function btn() {
        console.log(num4)
        num4.value = 10
      }

我們可以看一下效果。

沒錯，他會有一個錯誤，這個意思都懂，就是計算屬性是只讀的不允許修改。

為什么呢？

總結(jié)： 如果傳遞給 computed 的是一個函數(shù)，那么這就是一個 getter 函數(shù)，我們只能獲取它的值，而不能直接修改它。

那我需要修改計算屬性的值，我們需要怎么操作呢？其實很簡單，只需要傳進(jìn)去一個對象。

	  // 計算屬性求和
      const num3 = computed({
        get: () => {
          return Number(all.num1) + Number(all.num2)
        },
        set:(value) => {
          console.log(value)
          return all.num2 = Number(value) + 1
        }
      })

也就是說，計算屬性傳入一個對象，包含get 和 set 函數(shù)，就能實現(xiàn)創(chuàng)建一個可以修改的計算屬性。

案例：

<template>
  <div>
    <h1>computed 計算屬性</h1>
    <el-input v-model="num1" /> +
    <el-input v-model="num2" /> =
    <el-input v-model="num3" />
    <br>
    <br>
    <el-button type="primary" @click="btn">修改計算屬性</el-button>
  </div>
</template>
<script>
  import { computed, reactive, toRefs } from 'vue'
  export default {
    setup() {
      const num1 = ''
      const num2 = ''
      const all = reactive({ num1, num2 })

      // 計算屬性求和
      const num3 = computed({
        get: () => {
          return Number(all.num1) + Number(all.num2)
        },
        set:(value) => {
          console.log(value)
          return all.num2 = Number(value) + 1
        }
      })

      function btn() {
        num3.value = '10'
      }

      return { ...toRefs(all), num3, btn }
    }
  }
</script>
<style scoped>
  .el-input {
    width: 100px;
  }
</style>

點擊按鈕，把 num2 改成輸入的數(shù)字 + 1，也就是11。