前面幾篇 Vue 的內容，會有一些 computed 的用法，完全取代了 list 會有的功能，在應用裡面寫了 get & set ，曾經同事就問我，單單使用 array 不好嗎？我只能說沒有不好，只是我在學習新寫法的時候，學到了使用 Map 的物件，這個 Map 不是 array 下的那個方法 map ，而是一個全新的類型，最主要用於儲存 key-value 物件，詳細可以上 MDN 去參考範例
還有 Set 跟 Object 的差異，這個可以先參考下面這個文章，就可以多少了解 Map 的好處
這個用法我把它稱為 Resource 資源，主要我寫後端，這個跟我用操作資料庫很像，在多處情況下如果沒有意外，每個畫面中的交換都是傳遞二維陣列為主，以主鍵當作資料標記的目標鍵值，所以把後端往前端吐，使用 Map 類型來做資料取換是相當方便的一環。
list: computed({
get: () => Array.from(pageData.resource.values()),
set: (newData) => {
let resource = new Map()
Array.from(newData, (value, _key) => {
resource.set(value[pageData.primaryKey], value)
})
pageData.resource = resource
}
})先看到 set 部分，從後端取回清單資料，直接塞入 pageData.list ，就會進入這個 function ，在這個區塊程式碼，會重組 resource 這個變數，利用已知的 primaryKey ，塞入 id => value ， 完成後替換 pageData.resource ，替換變數讓整個綁定的變數連動。
接著到要取道 get 的部分，因為 computed 的快取特性，每次異動完 resource 都會被快取陣列到 list 裡面，所以當後續程式碼想要取用清單，都是 resource 的結果。
想要取得清單中的單一資料只需要知道 id 就可以 pageData.resource.get(id) 利用這個取得資料，資料傳遞相對的簡單許多。
如果統一每個參數呼叫或是傳遞都使用 ID，要驗證 resource 去額外做出取出判斷處理，就可以統一在一個方法中使用。
這邊直接用一個線上的 Vue3 Todo List 範例，改成 resource 版本
https://codepen.io/mesak/full/KKyYmqj
簡單說明，兩個 Method 異動，新增改成用 computed 往 pageData 的 list 賦值，如果正常前後端分離都是採用 API 往後端 POST，接著應該是取 List 或是刷新資料，這樣就可以完成一連串的連動。
刪除的事件把 resource 一個節點刪除，直接用 id 移除，跟著因為 computed 計算值的關係，異動了 resource 內容，所以又重新刷新了 list 數值，畫面就接著連動
推薦大家 使用 Map 這個類型。
