Vue Computed vs Methods

https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

差異

同一個 component 中、Computes 有在內部作 cache，Methods 沒有，所以 template 在 render 時不用每次呼叫，計算成本較低

// template
{{ urlMap[item.id] }}

// script
computed: {
    urlMap(): { [key: number]: string } {
      const mappedArray = this.list.map((building) => ({
        [item.id]: ``,
      }));
    // convert destructed item to object
      return Object.assign({}, ...mappedArray);
    },
},

Reactive computation

深入响应式原理 — Vue.js (vuejs.org)

Vue 對於同一個元件中的 cache 策略，Computed 會建立快取，但是 Methods 不會，所以用到 methods 時每一次都會讀取。在大量的 table rows 效果就會明顯，用 Computed 顯示 UI 的元件，因為有 cache 速度會比較快