Vue－可以幫我記住這個值嗎？（Computed）

會蠻常用到的功能。

寫過 React 的人可以把它想成是類似 useMemo 的概念。useMemo 的用途是用來「記住 function 的回傳值」，但不一樣的地方是 Vue 會自己判定這個值什麼時候該重新計算，不像我們寫 React 的時候還要自己定義 dependencies。

我們通常用它來對 data 中的資料做處理，最常見的例子是 filter：

const app = Vue.createApp({
  data() {
    return {
      users: [
        { name: 'PeaNu', age: 25, img: './assets/chung.jpeg', isOnline: true },
        { name: 'PPB', age: 24, img: './assets/ppb.png', isOnline: true },
        { name: 'ET', age: 999, img: './assets/badguy.jpeg', isOnline: false }
      ]
    }
  },
  methods: {
    toggleOnline(name) {
      this.users = this.users.map((u) => (u.name === name ? { ...u, isOnline: !u.isOnline } : u))
    }
  },
  computed: {
    // 只留下在線上的 user
    onlineUsers() {
      return this.users.filter((u) => u.isOnline)
    }
  }
})

只要 this.users 的值沒有改變，onlineUsers 就永遠不會被重新計算。

另外要注意的一件事情是：

• 如果 template 中沒有用到 computed 的話就不會執行
• 如果 template 中沒有用到 computed 的話就不會執行
• 如果 template 中沒有用到 computed 的話就不會執行

這算是我自己 debug 時踩到的雷吧，只是順便提一下。