Vue3学习（生命周期，hooks，axios的简单讲解）

一，前言

继续努力，南方见。

二，生命周期

1.对生命周期的理解

例如：人的生命周期，出生，经历，死亡

组件的话就是，创建，挂载，更新，销毁。***在特定的时刻调用特定的函数，***钩子也叫生命周期函数。

2，Vue2的生命周期

生命周期函数

创建前，创建完毕，挂载前，挂载完毕，更新前，更新完毕，销毁前，销毁完毕。

Vue2 的生命周期包含 8 个主要钩子函数：

beforeCreate：实例初始化之后，数据观测 data observer 和 event/watcher 事件配置之前被调用。
created：实例已经创建完成之后被调用。在这一步，实例已经完成了数据观测 data observer，property 和 method 的计算，watch/event 事件回调。然而，挂载阶段还没有开始，$el 属性目前不可用。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，所有的事件监听器和子实例都已经被销毁。

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

Vue2中组件名使用多单词

3,Vue3的生命周期

Vue3将销毁改叫卸载

Vue3 对生命周期进行了一些调整，同时引入了组合式 API：

setup：在创建组件实例时，初始化 props 和上下文之后立即调用 setup。它是组合式 API 的入口点，在 beforeCreate 之前调用。
onBeforeMount：对应 Vue2 的 beforeMount，在挂载开始之前被调用。
onMounted：对应 Vue2 的 mounted，组件挂载完成后调用。
onBeforeUpdate：对应 Vue2 的 beforeUpdate，在数据更新前调用。
onUpdated：对应 Vue2 的 updated，在数据更新后调用。
onBeforeUnmount：对应 Vue2 的 beforeDestroy，在组件实例卸载之前调用。
onUnmounted：对应 Vue2 的 destroyed，在组件实例卸载之后调用。
onErrorCaptured：当捕获到一个来自子孙组件的错误时被调用。
onRenderTracked：调试钩子，当一个响应式依赖被组件渲染跟踪时调用。
onRenderTriggered：调试钩子，当一个响应式依赖触发组件渲染时调用。
onActivated：在使用 <keep-alive> 缓存的组件被激活时调用。
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）封装有状态的逻辑。

核心作用：

逻辑复用：提取公共逻辑，避免重复代码。
状态管理：封装有状态的逻辑（如计数器、表单验证）。
副作用处理：管理生命周期、事件监听等副作用。
代码组织：将相关逻辑集中到一个函数中，提高可读性。

核心特点：

复用逻辑：提取公共逻辑（如计数器、窗口监听）。
响应式：使用 ref/reactive 管理状态。
生命周期安全：通过 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

基础用法：支持 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) {// 处理未授权}
});