作者：謝孟恭
出版者：遠見天下文化

世界上許多事並不全是「非黑即白」，其中還存在很多可能，就像「灰階」存在無限可能的色調。股市與人生並沒有所謂的標準答案。跳脫二元對立思維，改以多元思維思考，視野會更加廣闊。

Vue 2.0 使用的是 Options API，不過 Vue 3 新增了 Composition API。

Options API

所有功能依據程式邏輯進行拆分

以下的 data、methods、computed、created 都屬於程式邏輯。

所有功能依據程式邏輯進行拆分，對於初學者比較容易學習。Options API 這麼好用，為什麼 Vue 3 還要新增 Composition API ?

其實 Options API 還是有缺點，會把商業邏輯拆分至各處。尤其在元件功能越來越多時更明顯，會發現同一個商業邏輯被拆分在同地方，時間一久就不利維護。

而 Vue 3 這次新增的 Composition API 就可以把商業邏輯、功能集中在同一區塊。

Vuex 主要的核心概念

• state：存放所有共享資料的地方。
• actions：處理非同步。
• mutations：用於變更 store 的資料數據，還能集中監控所有數據的變化。
• getter：只進行包裝數據。

• Vuex 文件

什麼是 Vuex ?

用來管理前端網頁資料狀態，適合用來開發大型專案。
可以方便做為元件之間資料的共享，是實現元件全域狀態管理的一種機制。

Vuex 屬於單向資料流

會用到的 Git 常用指令

將檔案加入索引

1

git add .

將索引檔案提交

1

git commit -m "xxx"

更新遠端數據庫

1

git push origin master

下載遠端數據庫

1

git clone 數據庫網址

gitignore

如果有些檔案不想進入版本控制，就可以使用 gitignore 來忽略檔案。

新增.gitignore 檔案

在.gitignore 檔案中可以寫入不想進入版本控制的檔案。

範例： 在.gitignore 檔案中寫進 index2.html、ignore.css，這兩個檔案就不會進入版本控制，也不會被 push 到 github 上。

安裝

windows
Mac OSX

參考資源

• Git、GitHub 教學 - 六角學院
• Git & GitHub 教學手冊 - 六角學院
• 為你自己學 Git - 高見龍
• 30 天精通 Git 版本控管 - Will 保哥

Promise 物件代表一個即將完成、或失敗的非同步操作，以及它所產生的值。

• Promise - MDN
• 使用 Promise - MDN

非同步觀念

非同步行為會在所有程式碼執行完後才執行，因此看到非同步行為，執行順序就放最後。

就算 setTimeout 設定 0 秒，一樣不會改變它最後執行的順序。

物件傳參考

物件是以傳參考的形式賦值

1. 1 2 3 4 5 6 7 8 9 10

   const person = { name: '小胖', obj: {} } const person2 = person; person2.name = '阿肥'; console.log(person);

因為物件傳參考的特性(記憶體位置指向一樣)，導致最後都在改同一個物件資料。

• MDN 箭頭函式文件

傳統函式與箭頭函式寫法差別

傳統函式

取有餘數的值（單數）

1
2
3
4
5
6
7

const arr = [1, 2, 3, 4, 5];

const filterArr = arr.filter(function(item) {
  return item % 2 // 只要結果為真值就會回傳
})

console.log(filterArr); // [ 1,3,5 ]