---
tags: Vue 直播班 - 2022 冬季班
---

# 第三週

## 關鍵知識：

- 物件傳參考特性及實戰範例
- Vue 環境介紹
- 重要指令集
- computed, watch

## 傳參考特性

JavaScript 型別知識

- 原始型別：字串、布林、數字、undefined、null…
- 物件型別：物件、陣列、函式

> 哪裡會用到這個知識？
> 所有的物件都是用傳址的特性在進行運作

const people = [
  {
    name: '卡斯伯',
    like: '鍋燒意麵',
    price: 95,
    imageUrl: 'https://images.unsplash.com/photo-1569562211093-4ed0d0758f12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80'
  },
  {
    name: '瑞',
    like: '炒麵',
    price: 80,
    imageUrl: 'https://images.unsplash.com/photo-1612929633738-8fe44f7ec841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8ZnJpZWQlMjBub29kbGVzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60'
  },
  {
    name: '小明',
    like: '黑胡椒燴飯',
    price: 120,
    imageUrl: 'https://images.unsplash.com/photo-1637362520022-81292a4bff4b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'
  },
  {
    name: '喬伊',
    like: '生菜沙拉',
    price: 80,
    imageUrl: 'https://images.unsplash.com/photo-1505253716362-afaea1d3d1af?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'
  }
];

people.forEach((person, index) => {
  if (person.name === '卡斯伯') {
    // const newPerson = {
    //   name: '杰倫',
    //   like: '香菜',
    //   price: 180,
    // }; // 傳址
    // person = newPerson
    people[index] = {  // ”=” 就是 “指向”
      name: '杰倫',
      like: '香菜',
      price: 180,
    };
    person = {   // ”=” 就是 “指向”
      name: '杰倫',
      like: '香菜',
      price: 180,
    };
    console.log(person); // person 沒動

  }
});

console.log(people); // Ｑ：請問卡斯伯是否有被替換？


## Vue 的指令集

> 哪邊會用到指令？
> 在 Vue 中處理畫面包含互動、渲染，都會交由指令來進行處理

攻略手冊：[https://hackmd.io/@hexschool/S1DJeKTdL/%2FRhud3_1PR9qv1RJyMfwUmA](https://hackmd.io/@hexschool/S1DJeKTdL/%2FRhud3_1PR9qv1RJyMfwUmA)

快速複習指令：

- {{ }}
- v-bind
- v-if, v-else
- v-on
- v-for

其它指令及細節說明

- v-model
- v-for
- 補充說明 key
- v-on
- 修飾符
-

## methods、watch 及 computed

> 這三者差異：

- methods 為主動觸發的事件
- computed 可以監聽值來 “回傳一個新值”
- 可以用到的情境
- 可以監聽複數
- 原則上都會回傳一個新的值
- 可以監聽值的變動，重新運算出一個新的結果，而此結果與原資料並不相關（案例：資料邊動時，重新排序資料）
- 懶人包：
- 是產生一個作為渲染用的值：是 → 用 computed
- 不需要調整原始值、不需要觸發其他 methods：是 → 用 computed
- watch 可以監聽值來觸發一個事件，常見情境：
- 可以用到得情境
- 僅會監聽特定單值（不太會監聽複數值）
- 可以監聽特定值是否有變定，來重新運行事件（案例：元件外部的更新資料）
- 懶人包：
- 會不會修改到原始值：會 → 用 watch
- 會不會當作 methods 觸發：會 → 用 watch


## 作業說明

- 本週作業：
- <a href="https://rpg.hexschool.com/training/33/task?type=detail&id=324" target="_top">第三週主線任務：熟練 Vue.js</a>
- 補充教學：https://courses.hexschool.com/courses/vue-202121/lectures/43289920
- 團隊任務：
- https://rpg.hexschool.com/training/33/show?embedhm=ydfSm_IUSomqkVHqme3GpQ
- 下週預習：
- 元件章節：https://courses.hexschool.com/courses/vue-202121/lectures/43289984
- 補充：mitt 章節可不需觀看，之後會跳到 Pinia 這個工具（第五週以後）

### 挑戰 NVM

**Q: 什麼是 NVM？**
這是 Node.js 環境的版本管理工具，可以在電腦中安裝多個版本的 Node.js

**Q: 哪些人不建議參加這個挑戰？**
因為這個挑戰具有一定的風險，可能會造成「電腦開發環境損毀」難以恢復
1. 不確定電腦有沒有裝過 Node.js 環境
2. 電腦已經有安裝過 Node.js 環境
3. 完全不會任何終端機指令

**Q: 哪些人可以參加這個挑戰？**
1. 了解終端機且用過終端機指令
2. 確認電腦環境中沒有 Node.js 環境，或清楚自己能夠移除電腦中的 Node.js 環境

**Q: 這麼可怕，為什麼還要安裝 NVM？**
實戰中，開發環境不會固定只有一個 Node.js 版本，所以許多團隊開發都會用 NVM 切換
而這也是初階工程師往進階的道路，可以確保自己擁有一台可以隨便搞的電腦再來嘗試

尚未安裝 Node.js 的同學可參考 NVM：https://www.casper.tw/development/2022/01/10/install-nvm/

### 注意事項：
- 這段對於電腦環境不熟悉的開發者極不建議嘗試
- 電腦環境的損毀，我們無法協助恢復（因為不知道過程中同學有嘗試過哪些錯誤的流程）