點燈坊

戦わなければ、勝てない

將 Computed 重複部分也抽成 Computed

Sam Xiao's Avatar 2023-10-14

Computed 是 Vue 很偉大的發明，它簡單地實現了 Reactive Programming，當 computed 所相依的 mode 或 computed 改變時，computed 也會自動改變。

Version

Vue 2.6.11

Computed

computed000

使用 computed 顯示 Mr. Sam Xiao 與 Prof. Sam Xiao。

<template>
  <div>
    <div>{{ title }}</div>
    <div>{{ prof }}</div>
  </div>
</template>

<script>
let title = function() {
  return `Mr. ${this.firstName} ${this.lastName}`
}

let prof = function() {
  return `Prof. ${this.firstName} ${this.lastName}`
}

export default {
  name: 'App',
  data: () => ({
    firstName: 'Sam',
    lastName: 'Xiao'
  }),
  computed: {
    title,
    prof
  }
}
</script>

有 title 與 prof 兩個 computed，各自相依 firstName 與 lastName 兩個 model。

我們發現這兩個 computed，其 ${this.firstName} ${this.lastName} 是重複的，我們可以將這段 extract 出來。

Extract Computed

<template>
  <div>
    <div>{{ title }}</div>
    <div>{{ prof }}</div>
  </div>
</template>

<script>
let fullName = function() {
  return `${this.firstName} ${this.lastName}`
}

let title = function() {
  return `Mr. ${this.fullName}`
}

let prof = function() {
  return `Prof. ${this.fullName}`
}

export default {
  name: 'App',
  data: () => ({
    firstName: 'Sam',
    lastName: 'Xiao'
  }),
  computed: {
    fullName,
    title,
    prof
  }
}
</script>

27 行

computed: {
  fullName,
  title,
  prof,
}

新抽出 fullName，也是 computed。

第 9 行

let fullName = function() {
  return `${this.firstName} ${this.lastName}`
}

將重複的地方抽成 fullName()，別忘了它是 computed。

13 行

let title = function() {
  return `Mr. ${this.fullName}`
}

let prof = function() {
  return `Prof. ${this.fullName}`
}

title 與 prof 兩個 computed 可以重複使用 fullName computed。

Explicit Argument

<template>
  <div>
    <div>{{ title }}</div>
    <div>{{ prof }}</div>
  </div>
</template>

<script>
let fullName = ({ firstName, lastName }) => `${firstName} ${lastName}`

let title = ({ fullName }) => `Mr. ${fullName}`

let prof = ({ fullName }) => `Prof. ${fullName}`

export default {
  name: 'App',
  data: () => ({
    firstName: 'Sam',
    lastName: 'Xiao'
  }),
  computed: {
    fullName,
    title,
    prof
  }
}
</script>

第 9 行

let fullName = ({ firstName, lastName }) => `${firstName} ${lastName}`

firstName 與 lastName 也可直接使用 explicit argument，如此就不必使用 this，可安心使用 arrow function。

11 行

let title = ({ fullName }) => `Mr. ${fullName}`

let prof = ({ fullName }) => `Prof. ${fullName}`

Explicit argument 不只能傳入 model 而已，也能傳入其他 computed，因此也可安心使用 arrow function。

Conclusion

  • 一般人在使用 computed 時，都著重於對 model，但別忘了 computed 也可使用其他 computed，藉由這個特性，可將 computed 重複的部分再 extract 成 computed，依然保有原來 reactive 特性，也可以解決程式碼重複問題
  • Compunted function 除了使用 this 存取 model 與 computed 外，也可以 explicit argument 傳入 model 與 computed

# Vue