Vue－Composition API（Computed）

懶人包。

簡述

寫得越多你就越會發現都是這個 pattern：想要什麼就拿出來用

所以 Computed 也是一樣，直接看範例就懂了：

<template>
  <div class="home">
    <input type="text" v-model="search" />
    <p>Search term - {{ search }}</p>
    <ul>
      <li v-for="name of matchingNames" :key="name">{{ name }}</li>
    </ul>
  </div>
</template>

<script>
  // 把 computed 拿出來用
  import { computed, reactive, ref } from 'vue'

  export default {
    setup() {
      const names = ref(['mario', 'jojo', 'dio', 'luigi', 'koopa', 'peanu', 'ppb', 'joslon'])
      const search = ref('')
      const matchingNames = computed(() =>
        names.value.filter((name) => name.includes(search.value))
      )

      return { names, search, matchingNames }
    }
  }
</script>

這是一個搜尋的功能，matchingNames 就是根據關鍵字搜尋後的結果。