點燈坊

失くすものさえない今が強くなるチャンスよ

使用 Computed 根據 State 連動

Sam Xiao's Avatar 2024-01-30

除了 HTML 可以根據 State 連動以外，還可以建立 Computed 根據 State 連動，只要其中一個 State 改變，所有根據此 State 建立的 Computed 也會 Reactive 地跟著改變。

Version

Vue 3.4

Composition API

<template>
  <button @click="onClick">+</button>
  <div>{{ count }}</div>
  <div>{{ countPlus }}</div>
</template>

<script setup>
import { ref, computed } from 'vue'

let count = ref(0)
let countPlus = computed(() => count.value + 1)

let onClick = () => count.value++
</script>

Line 10

let count = ref(0)
let countPlus = computed(() => count.value + 1)
  • computed()：根據 count state 建立 countPlus computed，只要 count state 改變，countPlus computed 也會 reactive 地自動改變

Options API

<template>
  <button @click="onClick">+</button>
  <div>{{ count }}</div>
  <div>{{ countPlus }}</div>
</template>

<script>
export default {
  data: () => ({
    count: 0
  }),
  computed: {
    countPlus() {
      return this.count + 1
    }
  },
  methods: {
    onClick() {
      this.count++
    }
  }
}
</script>
  • 最後附上相同功能的 Options API 供參考
  • State 宣告在 data() function
  • Computed 會在 computed Object 以 mthod 形式宣告

Conclusion

  • Computed 在 Options API 與 Composition API 下有顯著差異
  • Computed 在 Options API 是以 method 形式宣告在 computed Object 下
  • Computed 在 Composition API 是以 function 傳入 computed()

# Vue