一，前言

繼續努力，南方見。

二，生命周期

1.對生命周期的理解

例如：人的生命周期，出生，經歷，死亡

組件的話就是，創建，掛載，更新，銷毀。***在特定的時刻調用特定的函數，***鉤子也叫生命周期函數。

2，Vue2的生命周期

生命周期函數

創建前，創建完畢，掛載前，掛載完畢，更新前，更新完畢，銷毀前，銷毀完畢。

Vue2 的生命周期包含 8 個主要鉤子函數：

1. beforeCreate：實例初始化之后，數據觀測 data observer 和 event/watcher 事件配置之前被調用。
2. created：實例已經創建完成之后被調用。在這一步，實例已經完成了數據觀測 data observer，property 和 method 的計算，watch/event 事件回調。然而，掛載階段還沒有開始，$el 屬性目前不可用。
3. beforeMount：在掛載開始之前被調用：相關的 render 函數首次被調用。
4. mounted：el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子。
5. beforeUpdate：數據更新時調用，發生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器。
6. updated：由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。
7. beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。
8. destroyed：Vue 實例銷毀后調用。調用后，所有的事件監聽器和子實例都已經被銷毀。

在Vue2中使用npm run serve 運行項目。可以在package.json中查到。

Vue2中組件名使用多單詞

3,Vue3的生命周期

Vue3將銷毀改叫卸載

Vue3 對生命周期進行了一些調整，同時引入了組合式 API：

1. setup：在創建組件實例時，初始化 props 和上下文之后立即調用 setup。它是組合式 API 的入口點，在 beforeCreate 之前調用。
2. onBeforeMount：對應 Vue2 的 beforeMount，在掛載開始之前被調用。
3. onMounted：對應 Vue2 的 mounted，組件掛載完成后調用。
4. onBeforeUpdate：對應 Vue2 的 beforeUpdate，在數據更新前調用。
5. onUpdated：對應 Vue2 的 updated，在數據更新后調用。
6. onBeforeUnmount：對應 Vue2 的 beforeDestroy，在組件實例卸載之前調用。
7. onUnmounted：對應 Vue2 的 destroyed，在組件實例卸載之后調用。
8. onErrorCaptured：當捕獲到一個來自子孫組件的錯誤時被調用。
9. onRenderTracked：調試鉤子，當一個響應式依賴被組件渲染跟蹤時調用。
10. onRenderTriggered：調試鉤子，當一個響應式依賴觸發組件渲染時調用。
11. onActivated：在使用 <keep-alive> 緩存的組件被激活時調用。
12. onDeactivated：在使用 <keep-alive> 緩存的組件被停用時調用。

生命周期對比表

Vue2 鉤子	Vue3 組合式 API 等效鉤子
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated
errorCaptured	onErrorCaptured

Vue3 通過組合式 API 提供了更靈活的方式來組織和復用邏輯，同時保留了選項式 API 的使用方式，讓開發者可以根據項目需求進行選擇。

三，Hooks

Vue3 的 Hook（組合式函數）是自定義的可復用邏輯函數，使用 Composition API（如 ref、reactive、watch）封裝有狀態的邏輯。

核心作用：

1. 邏輯復用：提取公共邏輯，避免重復代碼。
2. 狀態管理：封裝有狀態的邏輯（如計數器、表單驗證）。
3. 副作用處理：管理生命周期、事件監聽等副作用。
4. 代碼組織：將相關邏輯集中到一個函數中，提高可讀性。

核心特點：

1. 復用邏輯：提取公共邏輯（如計數器、窗口監聽）。
2. 響應式：使用 ref/reactive 管理狀態。
3. 生命周期安全：通過 onMounted/onUnmounted 處理副作用。

基礎示例：

// useCounter.js
import { ref } from 'vue'export function useCounter(initialValue = 0) {const count = ref(initialValue)const increment = () => count.value++return { count, increment }
}

使用方式：

<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter(0)
</script>

優勢：

• 邏輯復用更靈活
• 代碼組織更清晰
• 跨組件共享狀態邏輯

常見應用場景：

• 表單處理
• 數據獲取與緩存
• 事件監聽與清理
• 響應式窗口尺寸
• 本地存儲管理

四，axios

Axios 是一個基于 Promise 的 HTTP 客戶端，用于瀏覽器和 Node.js。它的特點是支持 Promise API、攔截請求和響應、轉換請求和響應數據、取消請求、自動轉換 JSON 數據以及客戶端支持防御 XSRF 等。必須掌握。

安裝

使用 npm 或 yarn 安裝：

npm install axios
# 或
yarn add axios

1. 基礎用法：支持 GET、POST 等請求方法，返回 Promise

// GET 請求
axios.get('/api/data').then(res => console.log(res.data));// POST 請求
axios.post('/api/submit', { data: 'value' });

2.特性：

• 自動轉換 JSON 數據
• 攔截請求和響應（如添加 token）
• 請求取消與超時處理
• 錯誤統一處理

3.常見場景：

// 全局配置
axios.defaults.baseURL = 'https://api.example.com';// 攔截器（添加 token）
axios.interceptors.request.use(config => {config.headers.Authorization = localStorage.getItem('token');return config;
});// 錯誤處理
axios.get('/data').catch(err => {if (err.response.status === 401) {// 處理未授權}
});

適合前后端數據交互，尤其在 React/Vue 項目中廣泛使用。