---
title: 第三堂:Vue 起步走-課堂共筆
tags: Vue直播班 - 2022 冬季班
---
###### tags: `2022 Vue直播班` `冬季班` `六角學院`

:arrow_backward: [回到目錄](https://hackmd.io/zEo77jAnSH-C9q1ADR-i4Q)

# 第三週 : Vue 起步走-課堂共筆
## 關鍵知識：

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

## 傳參考特性

JavaScript 型別知識

- 原始型別(採用複製的方式)：字串、布林、數字、undefined、null…
- 物件型別：物件、陣列、函式

> 哪裡會用到這個知識？
> 所有的物件都是用傳址的特性(記憶體位置)在進行運作
:::warning
JavaScript 中沒有 array 跟 function 型別 ，一律都是 Object
`ex: console.log(typeof array) => object`
:::

//範例 1
var text = '一段文字';
var text2 = text;
text2 = '修改後的文字';
console.log(text === text2); // false

//範例 2 ，以下程式碼只有一個物件
var a ={
    name:'a'
}
var b=a;
b.name = 'b';
console.log(a.name === b.name) //true

* 範例一的示意圖
* 範例二的示意圖

---

* ==常見的三種物件型別 : array , object , function==

//淺層
//以下程式碼總共只有一個物件
var a = {
    name:'a'
};
function changeData(param){
    param.name='b';
}
changeData(a);
console.log(a.name); // b

var a ={
    name:'a',
    obj: {
        name: 'obj'
    }
};
// 複製
// 淺層複製寫法
var b = {...a};
b.name = 'b';
b.obj.name = 'b-obj'; //  (a.obj.name 會被改變)
console.log(a.name); // a (沒有被改變)
//深層寫法
var b = JSON.parse(JSON.stringify(a));
b.name = 'b';
b.obj.name = 'b-obj'; //  (a.obj.name 不會改變)
console.log(a.name);
// 使用時機，如果不會用到深層，就用淺層寫

### 補充
1. 甚麼時候用 const

const a = { //記憶體位置: 0x01
    
};
a.name = ''; //記憶體指向不變
a = {}; //error 記憶體位置: 0x02
//變數沒有重新指向，一律使用 const

2. function是物件

function a(){
    
}
console.dir(a); 
// 物件的特性: 有屬性 / 可以新增屬性

a.myName=''; // 新增屬性

## Vue 的指令集

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

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

快速複習指令：

- {{ }} , v-text , v-html `只會渲染畫面`
- v-bind `只會綁定 HTML 的屬性`
- 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

### ==computed==
>1. 使用監聽的方式
>2. 並沒有產生新的 Data
>3. 原則上，不會修改到 Data
>4. 注意: sort 是唯一一種會去動到原始資料的陣列方法

## 作業說明

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