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

## 💖 本週複習 🥰

### ==1. computed 和 methods 兩者差別在哪呢?==

#### 相關知識點

#### 大家回答
- computed 在 mounted 時會先觸發一次
methods 要呼叫才觸發
- computed 與 methods 的差異主要在於兩個地方：
1. 監聽依賴。
2. 快取（緩存）。
- **監聽依賴的部分**
如果是 computed，當它發現資料有變化，就會重新執行。
但寫成 methods 需要主動在程式中調用（沒有辦法根據資料變化調用）。
- **快取 (緩存) 的部分**
如果是 computed，它會儲存每次計算完的結果。當它發現資料沒有變化，那麼就會直接 return 快取的結果。
但寫成 methods 的話，不管資料有沒有變化，就是全部重算一次。

<br>

### ==2. vue-router 是什麼？有哪些元件？==

#### 相關知識點

#### 大家回答
- 元件：router-link、router-view
<br>

### ==3. active-class 是哪個元件的屬性？==

#### 相關知識點
是 router-link 的屬性
- [active-class 與目前路由配對的樣式](https://book.vue.tw/CH4/4-3-router-link.html#active-class-%E8%88%87%E7%9B%AE%E5%89%8D%E8%B7%AF%E7%94%B1%E9%85%8D%E5%B0%8D%E7%9A%84%E6%A8%A3%E5%BC%8F)
- linkActiveClass
- 套用於 active RouterLink 的預設 class。
- 如果未提供，則將套用 router-link-active。
- 套用樣式的名稱可自訂
- eg.linkActiveClass: 'active', 套入 BS 的 active
- [官方說明(中文版)](https://router.vuejs.org/zh/api/interfaces/RouterOptions.html#Properties-linkActiveClass)
- [Active links](https://router.vuejs.org/guide/essentials/active-links)

#### 大家回答
<br>

### ==4. 怎麼定義 vue-router 的動態路由？怎麼獲取傳過來的值？==

#### 相關知識點

#### 大家回答
透過動態的值 (如id) 取得元件內容

{
    path: 'dynamicRouter/:id', // 動態路由，:冒號後方名稱自訂
    component: () => import('../views/DynamicRouter.vue')
},

- [路由觸發](https://blog.weisite.xyz/note/Vue%20Router/006#%E8%B7%AF%E7%94%B1%E8%A7%B8%E7%99%BC)
<br>

### ==5. $route 和 $router 的區別是什麼？==

#### 相關知識點

#### 大家回答

- this.$route：取得路由的屬性，網址上的參數 (物件)
- this.$router：呼叫路由的方法 (函式)

<br>

### ==6. vue-router 的兩種模式，有什麼差別呢==

#### 相關知識點
- [<被考倒系列QQ>Vue-Router的hash和history mode](https://medium.com/%E6%8B%89%E6%8B%89%E7%9A%84%E7%A8%8B%E5%BC%8F%E7%AD%86%E8%A8%98/vue-router-hash-history-mode-d02175eb0d7c)
- hash mode的原理: 使用location.hash和onhashchange事件
- history mode的原理: HTML5新增的 history.pushState()

#### 大家回答
- hash：#，SEO 較差
- history mode：搭配伺服器設定
- ChatGPT
<br>

### ==7. [測驗複習](https://casper-wang.notion.site/7555488641404d03a1b697dae6e5b2d5)==

## 額外補充
- [路由守衛](https://router.vuejs.org/zh/guide/advanced/navigation-guards)
防止你進不該進的頁面，例如：輸入後台網址會被踢回首頁。

- 在 Vue CLI 或 Vite 中，並非 src 資料夾內的所有檔案都會被編譯出來。通常只有被引用到的文件才會被編譯和打包。未引用的文件可能會被忽略，這是為了優化構建過程和最終的應用大小。
好像要 main.js 中有寫到的才會被編譯。

- 打包工具
- gulp 是用來管理任務，建構自動化流程的工具
- Webpack 則是將資源打包，提供模組化開發方式。

- 環境變量
[模式和环境变量](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F)

    .env    # 在所有的環境中被載入
    .env.local    # 在所有的環境中被載入，但會被 git 忽略
    .env.[mode]    # 只在指定的模式中被載入
    .env.[mode].local    # 只在指定的模式中被載入，但會被 git 忽略

- 用 a 連結不會在 history 中～
因為有 .go(-1) 這種用法，但是 a 連結更換路由不會記錄

- active-class、linkActiveClass
- router-link-active and router-link-exact-active
這兩個是 你沒有在初始化設定的時候，如果在路由符合
就會自動帶上的class
- active-class 看起來是指定單獨一個的
linkActiveClass 是設定全域的
- linkActiveClass 是設定路由樣式如何命名的屬性，而 router-link-active 和 router-link-exact-active 是實際在 HTML 顯示的 class 名稱(應該就是柯基說的 active-class)，透過 linkActiveClass 可以重新命名 router-link-active ，但 router-link-exact-active 我就不清楚惹
- [active-class 與目前路由配對的樣式](https://book.vue.tw/CH4/4-3-router-link.html#active-class-%E8%88%87%E7%9B%AE%E5%89%8D%E8%B7%AF%E7%94%B1%E9%85%8D%E5%B0%8D%E7%9A%84%E6%A8%A3%E5%BC%8F)
- [active-class 属于哪个组件中的属性？该如何使用？](https://juejin.cn/post/7029951763994132511)