vue3.0 Composition API 上手初體驗 神奇的 setup 函數 (四) 計算屬性 computed

vue3.0 Composition API 上手初體驗 神奇的 setup 函數 (四) 計算屬性 computed

上一講中，我們講解了 vue 3.0 的生命週期，我相信大家已經瞭然了。在 vue 中，計算屬性 computed 是非常常用的。那麼，在 vue 3.0 中，計算屬性是如何使用的呢？這一講我們來着重討論，。

上代碼！

首先，我們新建 src/views/Computed.vue 文件，並在路由中設定路由爲 computed。不會操作的看上一講的演示。

然後編寫如下代碼：

<template>
  <router-link to="/">點這裏去首頁</router-link>
  <hr>
  <div class="home">
    這裏是一個計數器 >>> <span class="red">{{count}}</span> <br>
    右邊的數字是上面的數字的十倍 >>> <span class="red">{{bigCount}}</span> <br>
    右邊的數字是上面的數字的一百倍 >>> <span class="red">{{computeCount['100x']}}</span> <br>
    右邊的數字是上面的數字的一千倍 >>> <span class="red">{{computeCount['1000x']}}</span> <br>
    <button @click="countAdd">點這個按鈕上面的數字會變</button>
  </div>
</template>

<script>
// 需要使用計算屬性，也需要從 vue 中導出引入
import { ref, computed } from 'vue'
// 導出依然是個對象，不過對象中只有一個 setup 函數
export default {
  setup () {
    // 定義一個 count 的響應式數據，並賦值爲 0
    const count = ref(0)
    // 定義一個函數，修改 count 的值。
    const countAdd = () => {
      count.value++
    }
    // 計算屬性，使用計算函數並命名，然後在 return 中導出即可
    const bigCount = computed(() => {
      return count.value * 10
    })
    // 計算多個屬性，可以通過返回一個對象的方式來實現
    const computeCount = computed(() => {
      return {
        '100x': count.value * 100,
        '1000x': count.value * 1000,
      }
    })
    // 導出一些內容給上面的模板區域使用
    return {
      count,
      countAdd,
      bigCount,
      computeCount
    }
  }
}
</script>

看效果

在瀏覽器中訪問 http://localhost:8080/#/computed 我們可以打開頁面，看到如下圖。

這是我多點了幾次按鈕，導致上面的數字變大了哈，默認都是 0

劃重點

計算屬性和生命週期一樣，都是從 vue 中導出引入的。我們把計算屬性當成一個函數來使用，直接 return 計算結果即可。

計算屬性函數可以多次使用，可以返回一個值，也可以返回一個對象包含多個值。嘿嘿很爽吧！

其實最重要的是，編程風格的統一。對於 react 轉 vue 的開發者來說，這樣的編寫風格是十分舒服的。但對於 vue 2.0 的開發者來說，會不太習慣。但是沒關係，習慣後你會很喜歡的。

好了，關於 vue 3.0 的這些新特性，基本都講完了，下一講我們玩玩組件。

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。

---

《vue3.0 Composition API 上手初體驗》 文章目錄地址： https://blog.csdn.net/fungleo/category_10020552.html 我會不定期的補充一些相關內容，歡迎關注訂閱！

文章代碼倉庫 https://github.com/fengcms/vue3-demo 會用 git 的朋友，可以去直接下載我的代碼。當然，給我點個 star 啥的，也不是不可以的哈！