函數作用域，整個函數中都有效，而且會被Hoisting，聲明自動提升到作用域頂部，並且可以重新聲明。
塊作用域，只在{ }內有效，也有Hoisting，但宣告前使用會報錯。
塊作用域，不能重新被賦值。
Number: 代表數字，包括整數和浮點數。例如：42、3.14。
BigInt: 用於表示超過 Number 能表示範圍的任意精度整數。例如：123n。
String: 代表字串，使用單引號、雙引號或反引號包圍。例如：'Hello'、"World"、`Template String`。
Boolean: 代表邏輯值，只有 true 和 false 兩個值。
undefined: 當變量被宣告但未賦值時，該變量的值為 undefined。
null: 代表空值，通常用來明確表示“無”的狀態。
Symbol: 一種唯一且不可變的基本資料型態，用作物件屬性的鍵，避免屬性名衝突。
null: 代表空值或不存在，通常用來明確表示“無”的狀態。
普通物件 ({})：用於存放鍵值對。
陣列 (Array)：有序集合，可以通過索引來訪問元素。
日期 (Date)：用來處理日期和時間。
函數 (Function)：可以被呼叫的物件，代表一段可重複執行的代碼。
正則表達式 (RegExp)：用於模式匹配的表達式。
其他物件類型：例如 Map、Set、WeakMap、WeakSet 等。
NaN: 代表“不是一個數字”（Not-a-Number），通常出現在數學運算結果無效時。
Infinity 和 -Infinity: 代表正無窮大和負無窮大。
存儲大小: 通常每個域名下的 cookie 限制為 4KB 左右。
持久性: 可以設置過期時間。未設置過期時間的 cookie 是會話性質的，即在關閉瀏覽器後自動刪除。設置過期時間的 cookie 可以在過期前保留。
作用域: cookie 會自動在同一域名下的每次 HTTP 請求中被傳送到服務器，並且可以設置作用於特定的路徑或子域名。
安全性: 支援 HttpOnly 和 Secure 屬性。HttpOnly 可防止客戶端 JavaScript 訪問 cookie，Secure 只有在 HTTPS 連接下才會傳送 cookie。
用途: 常用於持久性登入狀態、用戶偏好設置、追踪用戶行為等。
存儲大小: 大約 5-10MB，具體大小取決於瀏覽器。
持久性: 資料僅在單個瀏覽器標籤頁的會話期間存在。關閉該標籤頁或瀏覽器後，存儲的資料將被清除。
作用域: 只能在存儲資料的同一瀏覽器標籤頁和同一來源（同一域名、協議和端口）中訪問，不會在不同的標籤頁或窗口之間共享。
安全性: 通過 JavaScript 訪問，容易受到 XSS 攻擊影響。
用途: 用於臨時存儲用戶會話期間的資料，例如表單數據保存、暫時性操作狀態等。
存儲大小: 大約 5-10MB，具體大小取決於瀏覽器。
持久性: 資料永久保存，除非被手動清除。即使關閉瀏覽器後，資料仍然存在，直到明確刪除為止。
作用域: 可以在同一瀏覽器中的同一來源（同一域名、協議和端口）的所有標籤頁或窗口中共享資料。
安全性: 通過 JavaScript 訪問，容易受到 XSS 攻擊影響。
用途: 用於長期保存資料，例如使用者偏好設定、應用程式狀態等。
Cookie: 小型數據存儲，通常用於需要在每次請求中傳輸到服務器的資料，並且可以設置持久性和安全性屬性。
sessionStorage: 用於短期的資料存儲，僅在當前標籤頁的會話期間有效，適合臨時性的操作。
localStorage: 用於長期的資料存儲，即使瀏覽器關閉後資料仍然存在，適合需要跨會話保存的資料。
定義: px 是一個絕對單位，代表顯示器上的一個像素。
特性: 尺寸固定，不會根據父元素或瀏覽器設置自動調整。
適用場景: 當需要精確控制元素的尺寸時，px 非常有用。例如，設計界面元素（如按鈕、邊框）或圖片時常用 px 來確保在各種環境下的精確呈現。
定義: em 是一個相對單位，基於當前元素或父元素的字體大小。1em 通常等於父元素的字體大小。
特性: 會隨著父元素的字體大小變化而調整。因此，em 單位可以用於創建響應式設計，隨著字體大小改變其他相關尺寸。
適用場景: 常用於字體大小、內外邊距、寬高等屬性，尤其是在需要相對調整的情況下。例如，設定按鈕或段落文字與其周圍元素的相對大小。
定義: rem 也是一個相對單位，但它是相對於根元素（通常是 <html>）的字體大小。1rem 等於根元素的字體大小。
特性: 相對於 em 而言，rem 的行為更為一致，因為它只依賴於根元素的字體大小，不會受到父元素的影響。
適用場景: 使用 rem 可以讓整個頁面的比例設計更統一，特別是在創建響應式設計時。例如，當需要讓整個頁面的字體和佈局隨著根字體大小而變化時，rem 是非常實用的。
px: 固定大小，不會隨著父元素或全局設置變化。
em: 相對於父元素的字體大小，可以用於創建響應式設計。
rem: 相對於根元素的字體大小，適用於全局一致的比例調整。
320px - 480px: 對應大多數手機的螢幕，這個範圍的斷點通常針對小型螢幕進行優化。
範例: iPhone SE、iPhone 8、Google Pixel 等。
常見設計調整: 單列佈局、簡化導航菜單、較大的按鈕和字體、隱藏不必要的圖像或動畫。
481px - 768px: 對應小型平板電腦和較大螢幕的手機，例如一些平板電腦和大屏手機。
範例: iPad Mini、Samsung Galaxy Tab、iPhone 12 Pro Max 等。
常見設計調整: 雙列佈局、調整字體大小、優化圖像大小。
769px - 1024px: 對應大多數平板電腦和小型筆記型電腦。
範例: iPad Air、iPad Pro、11吋的筆記型電腦等。
常見設計調整: 更複雜的佈局，如三列佈局或更多內容顯示，適合在螢幕空間增大的情況下展 示更多資料。
1025px - 1200px: 對應大部分桌面螢幕和較大筆記型電腦。
範例: 13吋以上的筆記型電腦、桌面顯示器。
常見設計調整: 多列佈局、側邊欄導航、更豐富的圖像和多媒體內容展示。
1201px 以上: 對應超寬桌面顯示器和4K顯示器。
範例: 24吋或更大的顯示器、超寬螢幕。
常見設計調整: 更寬的佈局、可以使用更大的空白區域、更大的圖像和視頻。
.container {
display: flex;
justify-content: center; /* 水平置中 */
align-items: center; /* 垂直置中 */
height: 100vh; /* 使容器全高以便完全置中 */
}
.container {
display: grid;
place-items: center; /* 同時水平與垂直置中 */
height: 100vh; /* 使容器全高以便完全置中 */
}
.container {
position: relative;
height: 100vh; /* 父容器全高 */
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 透過自身一半的寬高來置中 */
}
.container {
display: table;
width: 100%;
height: 100vh;
}
.element {
display: table-cell;
vertical-align: middle; /* 垂直置中 */
text-align: center; /* 水平置中 */
}
.element {
width: 200px;
height: 200px;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0; /* 置於父容器的中央 */
}
.container {
height: 100vh;
text-align: center; /* 水平置中 */
line-height: 100vh; /* 行高等於容器高度，垂直置中 */
}
.element {
display: inline-block;
vertical-align: middle;
line-height: normal; /* 防止文本內行高影響 */
}
flexbox 和 grid 是最推薦的現代方法，簡單且易於維護。
position 和 transform 適合特定情況下的置中需求，尤其是元素大小固定時。
margin 和 line-height 是針對特定場景的小技巧。
父組件傳子組件 (Props)
方式: 父組件通過 props 向子組件傳遞資料。子組件接收到的 props 是不可變的（只讀），不能直接修改。
場景: 當需要從父組件向子組件傳遞資料（例如配置選項、狀態值等）時使用。
方式: 子組件可以通過 $emit 向父組件發送事件，父組件接收到事件後可以執行相應的處理邏輯。
場景: 當子組件需要將某些行為（如按鈕點擊）或資料變化通知父組件時使用。
方式: 使用一個中央的事件總線（EventBus）或輕量級的事件發佈/訂閱庫（如 Mitt）來在兄弟組件之間傳遞資料。
場景: 當兄弟組件之間需要共享資料或相互通知時使用，特別是在這些組件沒有直接的父子關係時。
方式: 父組件（或祖先組件）可以使用 provide 提供資料，任意深度的子組件可以使用 inject 注入這些資料。這些資料在提供者和使用者之間是共享的。
場景: 當祖先組件需要提供資料給深層次的子組件，且不希望通過逐層傳遞 props 時使用。
方式: 使用 Vuex 來集中管理應用程式的全局狀態。組件可以從 Vuex store 中獲取資料或提交變更。
場景: 當應用程式變得複雜，需要在多個組件之間共享大量狀態時使用，適用於大型應用。
Props & $emit: 適合父子組件間的資料傳遞，是最基本的方式。
EventBus / Mitt: 適合兄弟組件間的資料傳遞，尤其是無直接父子關係時。
Provide / Inject: 適合祖先組件與深層次子組件間的資料共享，避免逐層傳遞 props。
Vuex: 適合大型應用中全局狀態的管理，實現複雜狀態共享。
Vue Router 的導航守衛（Navigation Guards）是用來攔截或觀察路由變化的功能，允許在導航進行前、進行中、進行後進行操作。這些守衛可以用於控制路由進入、離開等各種情況。Vue Router 提供了多種導航守衛，每種守衛都有不同的作用和使用場景。以下是它們的說明及典型使用場景：
beforeEach
觸發時機: 在每次導航觸發時（即路由變更前）執行。
意義: 主要用於在進入每個路由之前進行一些檢查或設置，例如驗證用戶是否登錄、權限檢查、全局加載指示等。
場景: 驗證用戶是否已經登錄，如果沒有，重定向到登錄頁面。全局加載動畫的觸發或結束。
beforeResolve
觸發時機: 在所有的 beforeEach 守衛和當前路由的 beforeEnter 守衛之後，但在導航確認前執行。
意義: 用於處理需要確保所有異步操作完成後才進行的邏輯，這個鉤子在全局 beforeEach 和組件內部守衛之後執行。
場景:
用於處理所有依賴解決後，最終確認之前的操作。
afterEach
觸發時機: 在導航被確認後執行。
意義: 用於在每次路由變更後執行操作，通常用來進行一些清理工作或更新資料（例如，清除進度條、記錄頁面瀏覽統計）。
場景:
記錄用戶的導航日誌或追踪，用於分析用戶行為。
清除全局加載動畫。
beforeEnter
觸發時機: 在進入某個特定路由前執行。
意義: 僅在進入某個具體路由時進行的檢查或邏輯操作。這些守衛只對指定的路由生效。
場景:
在進入某個特定的路由之前進行特殊的權限檢查。
為特定路由提前加載所需的數據。
beforeRouteEnter
觸發時機: 在進入路由並解析完成，但在路由組件被創建之前執行。
意義: 可以在組件被創建之前進行邏輯操作，例如獲取數據或進行驗證。此鉤子無法直接訪問 this，因為在守衛執行時組件還未創建。
場景:
進行數據預取，然後再將數據傳遞給組件。
確保在渲染之前進行某些檢查（如登錄狀態、權限檢查）。
beforeRouteUpdate
觸發時機: 在當前路由改變（例如，從 /user/1 到 /user/2，但仍然使用同一組件）時觸發。
意義: 用於處理同一組件被重新使用但路由參數發生變化的情況。
場景:
在動態路由參數改變時（如用戶 ID 改變）重新加載或更新資料。
beforeRouteLeave
觸發時機: 在離開當前路由時觸發。
意義: 用於防止用戶離開當前路由（例如，填寫表單未保存），可以攔截導航或執行一些清理操作。
場景:
用於提示用戶確認是否離開（例如表單尚未提交時），或進行組件內部的清理工作。
全局守衛 (beforeEach, beforeResolve, afterEach): 適合全局性的檢查、權限控制或操作，如全局的驗證或統計。
路由級別守衛 (beforeEnter): 適合在特定路由進入前的檢查或操作，如特定頁面的權限檢查。
組件內部守衛 (beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave): 適合與具體組件相關的邏輯，如數據加載、更新或清理工作。
Vuex 是 Vue.js 的一個狀態管理模式和庫，專為管理應用中的全局狀態而設計。它集中管理應用中的所有狀態，使狀態的變更和追踪變得更加可預測和易於維護。Vuex 通常用於中大型的 Vue.js 應用，特別是當應用有多個組件需要共享或同步狀態時。
Vuex 的核心概念包括：
State（狀態）: 用於存放應用的全局狀態。這些狀態可以在應用中的任何組件中被訪問。
Getters（計算屬性）: 是 Vuex 的計算屬性，用於從 state 中派生出一些狀態（類似於 Vue 組件中的計算屬性）。
Mutations（變更）: 是唯一允許直接更改 state 的方法。每個 mutation 都有一個字符串類型的事件類型和一個回調函數，回調函數是實際進行狀態更改的地方。
Actions（行動）: 用於處理異步操作或者提交多個 mutation。Actions 可以分發（dispatch）其他 actions 或者提交（commit）mutations。
Modules（模塊）: 為了更好的組織結構，可以將 Vuex 狀態分割成模塊，每個模塊擁有自己的 state、mutations、actions、getters，甚至可以是嵌套模塊。
1.狀態的單一數據源
Vuex 的核心理念是通過單一的狀態樹來管理應用的狀態。這樣能夠使得應用中的狀態變得一致且易於追蹤。不應該直接在組件中改變 Vuex 的狀態，而是通過 mutation 來進行。
2.Mutations 必須是同步操作
Mutations 是用來變更狀態的唯一方式，並且它們必須是同步的。這是因為 Vuex 需要在狀態變更發生後立即更新並重新渲染視圖，如果 mutation 中包含異步操作，會使狀態變更的過程變得不可預測。異步操作應該放在 actions 中。
3.避免在 Actions 中直接修改狀態
雖然 Actions 可以執行異步操作，但它們不應該直接修改狀態。Actions 應該通過 commit mutation 來改變狀態。這樣可以保持狀態變更的可追蹤性和一致性。
4.合理使用 Getters
Getters 用於從 state 中派生狀態。它們應該用於複雜計算或從狀態中取得特定資料，而不是直接修改狀態。需要注意的是，Getters 的結果會被緩存，直到相關的 state 改變時才會重新計算。
5.模塊化設計
當應用變得複雜時，將 Vuex 的狀態管理劃分為多個模塊會使得代碼結構更加清晰。每個模塊可以管理自己的 state、mutations、actions 和 getters。這樣的模塊化設計有助於代碼的可維護性和可擴展性。
6.遵循 Vuex 的命名規範
為了保持代碼的可讀性和一致性，應該遵循 Vuex 的命名規範。例如，使用大寫字母命名 mutation 類型，這是一種通行的做法，可以讓 mutation 類型在代碼中一目了然。
7.性能考量
在處理大量資料或高頻更新的情況下，Vuex 的性能可能會受到影響。在這些情況下，應該考慮優化策略，例如使用 Vuex 的 mapState 和 mapGetters 來避免不必要的重新計算，或者將高頻更新的狀態儘量移出 Vuex。
8.Debugging 工具的使用
Vuex 的狀態管理在大型應用中可能會變得複雜，因此使用 Vue Devtools 或 Vuex 的時間旅行功能可以幫助開發者追踪狀態的變更歷史，這對於 Debugging 非常有幫助。
Vuex 是一個強大的工具，可以有效管理 Vue.js 應用中的全局狀態。然而，它的使用應該基於實際需求，避免過度設計。理解 Vuex 的核心概念和注意事項，可以幫助開發者更好地組織和管理應用的狀態，從而提高代碼的可維護性和可擴展性。
觸發時機: Vue 實例剛剛被初始化，但還未進行任何數據觀察、事件配置或其他設置。
應用場景: 在這個階段，data 和 methods 尚未初始化，因此無法使用。很少在這個階段進行操作，除非需要在初始化過程之前執行一些代碼。
觸發時機: Vue 實例已經創建完成，完成了 data、methods、computed 等的初始化，但尚未掛載到 DOM 上。
應用場景: 在這個階段可以進行一些數據初始化、調用 API 或設置定時器等操作，因為所有的響應式屬性已經設置好，但 DOM 尚未渲染。如果需要在組件掛載之前獲取數據或進行一些邏輯操作，這是理想的階段。
觸發時機: 在掛載開始之前被調用，此時模板已經編譯成 render 函數，但還未將 DOM 內容渲染到頁面上。
應用場景: 可以在此進行一些和 DOM 無關的操作，或是檢查即將渲染的內容。一般很少單獨使用這個鉤子。
觸發時機: Vue 實例被掛載到 DOM 中，此時組件已經在頁面上渲染完成。
應用場景: 這個階段適合執行與 DOM 相關的操作，例如 DOM 查詢、設定事件監聽器、初始化第三方庫（如圖表、地圖等）。
可以在此處獲取 DOM 節點進行操作，如設定焦點或取得元素尺寸。
觸發時機: 當響應式數據更新時，但 DOM 還未重新渲染時觸發。
應用場景: 在這個階段，可以在數據變更導致的視圖更新前進行一些操作。這是適合進行更新前的一些準備工作，如手動的清理或重置某些數據。
觸發時機: 由於數據的改變，DOM 已經重新渲染並更新完成。
應用場景: 可以在這裡操作更新後的 DOM，例如重複初始化第三方庫或執行依賴於最新 DOM 狀態的操作。
適合做一些依賴於 DOM 完全更新後的操作，如滾動條位置調整。
觸發時機: Vue 實例被銷毀之前觸發。在這一步，實例仍然是完全可用的。
應用場景: 適合在這裡清理定時器、事件監聽器或解除對外部資源的依賴，以防止內存洩漏。如果組件在銷毀之前需要保存狀態或進行一些撤銷操作，可以在這個階段進行。
觸發時機: Vue 實例被銷毀後觸發。此時所有的事件監聽器已解除，所有的子實例和響應式資料都已經被銷毀。
應用場景: 在這個階段，實例已經被清理乾淨。可以在這裡進行最後的清理工作，例如通知外部組件或服務，該實例已經銷毀。
初始化階段 (beforeCreate, created): 用於設置組件的初始狀態和數據。
掛載階段 (beforeMount, mounted): 用於與 DOM 相關的操作。
更新階段 (beforeUpdate, updated): 用於在數據變更後進行操作。
銷毀階段 (beforeDestroy, destroyed): 用於進行清理和撤銷操作。