[Vue] Vue Todos

以下簡單紀錄一下踩到的坑：

v-bind 等方法後面接的 key 不可以為小駝峰，多個單詞請用 hyphen，傳為 props 時會自動轉譯為小駝峰。參閱。
event 的彈出與監聽一律使用 kebab-case (hyphen)。參閱。
邏輯運算盡量拉出為 computed 方法或 methods，避免在樣板中處理複雜的邏輯運算。
在組件 filter-button 中 template 使用到 $emit
v-on:click="$emit('set-filter', filterItem)"
其父組件為 filter-button，因此事件監聽 v-on 應放此處。
> 承上，更好的做法：將 $emit 改為 methods，並在父組件 mounted 時掛載 event listener。
> best practice：採用 vuex 等統一管理資料，減少依賴。
computed：
- getter、setter 的 this 自動綁定到 instance。
- 計算結果會被暫存，除非參考到的屬性有變化。
- 屬性若在範疇之外，計算不會更新。
- 要有 return。
- 呼叫時不用加 ()。
methods：
- this 自動綁定到 instance。
- 通常搭配 event trigger 使用。
- 因為是方法，運算效能比 computed 差。
- 不一定要有 return。
- 呼叫時要加上 ()。