###### tags: `鐵人30`

# 鐵人 30 Vue.js 進階心法

[發文連結](https://ithelp.ithome.com.tw/users/20107637)

## Vue.js 進階心法

認識 Vue 官網上寫的重點

1. [帶你從需求到功能](/AZH_izxZTsynI7fJS4nW4g)
- 歸納功能的觀念: 需求 -> 讀寫 -> Vue 語法
2. [丟掉假的雙向綁定: 拆開 v-model](/mND4LsPPRKC27nXw7kCYzg)
- v-bind + v-on
- `:value` + `@input`
- input text
- textarea
- `:checked` + `@change`
- input checkbox
- input radio
- `:value` + `@change`
- select
3. [pure function](/UW9s2J7JQ5-zsvucZDQ1Eg)
1. [pure Component](/wQSneX1gSsyIHX2oICzjyA)
- 決定資料的是 views，不是 component
- 所有的 `emit` 只和 `props` 相關
4. [Component 的 Component](https://hackmd.io/Tf-elSTcR22wPKbDbSW8eA)
- `$attrs` 沒有在 props 和 listeners 的 attrs
- `$props` 直送給 `props`
- `$listeners` 直送給 `emit`
5. [深入淺出 Computed](https://hackmd.io/wQRRNVl_RS6EaeX0k3OHsA?both)
- v-bind/v-on 同名可寫 v-model 之 computed 的 get/set
- 拆掉
- 一行拆掉
6. [用 watch 必用 immutable](https://hackmd.io/T6lMfkH_SsWEWXOSTprUbw)
- deep watch
- immutable

Vue-router

7. [`<component :is="">` 是看字串的鬼牌](https://hackmd.io/tWgje84PREmSXT8m00cVSw)
- 可以 `v-bind` ?
- 可以 `v-on` ?
8. [`<router-view>` 是看網址的鬼牌](https://hackmd.io/757yZTzuR6OE7YTxirIvZA)
- 可以 `v-bind` ?
- 可以 `v-on` ?

Vuex

9. [單一資料流](https://hackmd.io/OCowIwByT5a0WoTC1tdjHQ)
- flux
- vuex
6. [state: 存放資料的地方](https://hackmd.io/1Hev0oXASiG_ns4XJknirQ)
- 直接存取 state
7. [Vuex 的使用注意事項](https://hackmd.io/DtegJb9lRfmiCn33UNbPvg)
- mutation: setter
- getters: getter
- 命名規則

對 API 的實戰步驟
https://hackmd.io/0wYLXAHNR9e6cdKwKJ_Elg?view

13. - [x] [處理 API 層次感之基礎篇](https://hackmd.io/5_KTg5mRTiS0rfvX-UqNlg)
9. - [x] [讓 API Doc 成為你的程式碼](https://hackmd.io/tqKJ3-TFTKGDOIdXFAazGg)
11. - [x] 不要在 mutation 加工 API 回來的資料
12. - [x] 用 getters 抽象 state
8. - [x] actions 就是共用的 method
8. - [x] 用兩支 API 實作新增資料與上傳檔案
12. 決定資料的是 views 但是不儲存在 views
13. [在哪發 API 才是好的呢？](https://hackmd.io/-OxMuAMnSL2ZnTglBfAGOw)
- mounted -> created -> beforeEach -> beforeEnter
21. [其它的 lifecycle 或 vue router 的 hook](https://hackmd.io/hH_aVrk6S96UwhDO84P4Pg)

form 表單攻略

22. [Form 表單攻略前準備](https://hackmd.io/-Nq2tcw-SsqQQriDpdpqYA)
20. [用 event 來準備傳給後端的 data](https://hackmd.io/-fLA_W2nTkKGqPnFcnKpPw)
10. 可以拆掉的 computed get/set
- 緊湊的 vue/vuex 寫法
9. [form: 新增/編輯模式切換](https://hackmd.io/p4w2iou2SHWEfZ-MwHiyRA)
- `$listener` 或其它的做法 ☆☆☆☆☆

校正一下

25. [form: 處理 Object](https://hackmd.io/OF5NFmvdQKCMjvHVnBYJVQ)
25. [form: Object 的 object](https://hackmd.io/u_byug_zTLOoe9fwgf-XjQ)
4. [form: Object 的 array](https://hackmd.io/cvXepuK6SkuCUJ239hkbzw)
11. [怎麼只傳給後端有改變的欄位 `vuex` (下)](https://hackmd.io/5wgIGSLBRR667SPmQAtt_Q)
- 豪華架構的初值
- 圖解
29. [$scopedSlots 的魔法](https://hackmd.io/4UgIwaPKS_eI0N4BDiZWiA)
30. [關於 Vue.js 進階心法](https://hackmd.io/z_oQ8og_SiGf6VruGCYfFQ)

沒寫的部份

10. form 表單的初值怎麼給 `vuex` (上)
- 一般的初值

表格顯示攻略 (以 Bootstrap Vue 為例)

28. table 的搜尋/分頁
- 工具列 component
- 表尾的工具列 component
27. table component 的再封裝
- component 再包一次
- 內部使用超集處理
26. slot 的 slot (巢狀式 slot)
1. $scopedSlots 的魔法

> 厲害的原因，不是因為我做了什麼，而是我為什麼這麼做

<TagList
  :list=metaTagList
  @update:list="$store.commit('metaTagList', $event)"
></TagList>

<div
  class="meta_tag_content"
  v-for="(item, index) in list"
  :key="index"
>
  <input
    :item="item"
    @updata:abc="updateList"
    @update:content="updateList"
  >
  </input>
</div>

updateList(item) {
  this.$emit('update:list', [
    ...list.slice(0, index),
    item,
    ...list.slice(index + 1)
  ])
}

 <input
  :value="item.name"
  @update:value="$emit('update:abc', {
    ...item,
    name: $event,
  })"
/>


item = {
    "id": 16,
    "name": "descriptionkkkk",
    "content": "hi",
    "link_id": 1
  }