快捷導(dǎo)航

Vue3?計(jì)算屬性的用法詳解

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

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

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

computed 計(jì)算屬性說明

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

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

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

計(jì)算屬性使用

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

import { computed } from 'vue'

引入這一個(gè)步驟是不可或缺的。

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

<template>
  <div>
    <h1>computed 計(jì)算屬性</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>

保存刷新，輸如前兩個(gè)輸入框的值，會(huì)自動(dòng)計(jì)算和展示在第三個(gè)輸入框。

這樣就實(shí)現(xiàn)了最簡(jiǎn)單的計(jì)算屬性。

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

<template>
  <div>
    <h1>computed 計(jì)算屬性</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 })

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

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

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

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

但是有一點(diǎn)需要注意！

如果我們直接修改計(jì)算屬性的值會(huì)報(bào)一個(gè)錯(cuò)誤！

比如我們有一個(gè)按鈕，點(diǎn)擊之后把 num4 修改為 10 。

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

我們可以看一下效果。

沒錯(cuò)，他會(huì)有一個(gè)錯(cuò)誤，這個(gè)意思都懂，就是計(jì)算屬性是只讀的不允許修改。

為什么呢？

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

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

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

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

案例：

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

      // 計(jì)算屬性求和
      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>

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