# ==討論日期 : 5/10 ( 五 )==

## 💖 本週複習 🥰

### ==1. 請說明 MVVM機制==

#### 相關知識點
- [什麼是 MVVM？](https://www.explainthis.io/zh-hant/swe/mvvm)
- [Vue、MVVM、MVC、雙向綁定](https://hoyis-note.coderbridge.io/2021/08/12/Vue-MVVM-MVC-%E9%9B%99%E5%90%91%E7%B6%81%E5%AE%9A/)
- [Vue.js 與 MVVM 模式](https://book.vue.tw/CH1/1-1-introduction.html#vue-js-%E8%88%87-mvvm-%E6%A8%A1%E5%BC%8F)
<br>

#### 大家回答

<br>

### ==2. 請說明 {{}} 與 v-text 有什麼不同==

#### 相關知識點

#### 大家回答

<br>

### ==3. 請說明 v-html 為何不能使用==

#### 相關知識點
- [『 Day 9 』Web Security - A7 . Cross-Site Scripting (XSS) - 上篇](https://ithelp.ithome.com.tw/m/articles/10218476)
<br>

#### 大家回答
v-text 是將內容原封不動地顯示出來，v-html 可渲染含有 HTML 標籤的字串。但我們會盡量避免使用 v-html，因為如果使用者將 v-html 的內容改成 js 的檔案，就能藉而去操作系統的資料，可能會帶來 XSS 攻擊。
<br>

### ==4. 請說明 v-if 和 v-show 差別在哪==

#### 相關知識點

#### 大家回答
v-show 只是用 CSS 隱藏，DOM 還在，v-if 是完全移除 DOM，並且會經歷完整的生命週期。
<br>

### ==5. 請說明Vue的生命週期==

#### 相關知識點
- [1-7 元件的生命週期與更新機制](https://book.vue.tw/CH1/1-7-lifecycle.html)

#### 大家回答


<br>

### ==6. 請說明 v-if 和 v-show 在 Vue 的生命週期的差異==

#### 相關知識點

#### 大家回答

<br>

### ==7. 請選擇==

關於 Vue 的指令，下面哪一段描述正確？其他為何錯誤?

1. v-for, v-if 可使用在同一個元素上
2. : 是 v-bind 的縮寫
3. v-for 內，建議加入 key 屬性，而 key 屬性建議直接使用陣列的索引值
4. 以上描述皆正確

#### 相關知識點
- [v-for 与 v-if](https://cn.vuejs.org/guide/essentials/list.html#v-for-with-v-if)

#### 大家回答
- v-for 與 v-if 共用
v-for 的變數，會沒辦法在 v-if 中取用到，因為 v-if 的層級比較高。
template 不會被渲染。
用 template 體感上比較好閱讀，會知道這邊就是有用到 v-if 或者其他 vue 語法，不會跟其他 CSS 還有 HTML 屬性混在一起。
- v-for 的 key 不建議使用 index
不管元素內容如何，index 永遠都是按照順序由 0 開始遞增，它無法作為一個元素內容的唯一識別。
今天我對這個資料集做刪除、新增，或甚至重排資料順序時，元素排列改變了，但 index 仍然是按照順序由 0 開始遞增，它無法識別出當初元素的排列狀態。
這樣講可能有點抽象，這邊分享[課堂範例](https://codepen.io/codepenplayer/pen/WNmvwvb)，可以試試「v-for 與 key」的部份，觀察一下其效果，再思考怎麼用自己的方式說出來。

<hr>

## 額外補充
- [ECMAScript 6 简介](https://es6.ruanyifeng.com/#docs/intro)
- [Sass / SCSS 預處理器 - 自建 CSS 框架中的 Grid System 與 Spacing](https://awdr74100.github.io/2020-06-24-scss-gridsystem-spacing/)