10月25日
1. ES6 模块导入语法（import）
- 带 {} 的 import（解构导入）：导入模块中按名字导出的（named exports）。
- 不带 {} 的 import：导入模块中默认导出的（default export）。
1. 默认导出（default export）
导出时这样写：
utils/request.js
export default {get() {},post() {}
}
导入时写法是：
import request from '../utils/request'
特点：
default 导出的模块可以用 任意名字 接收；
因为一个文件只能有 一个默认导出。
例如：
import abc from '../utils/request' // 也能用abc代替request
2. 命名导出（named export）
导出时这样写：
vue内部就是这种
export function reactive() {}
export function getCurrentInstance() {}
或：
// 另一种写法
function reactive() {}
function getCurrentInstance() {}export { reactive, getCurrentInstance }
导入时要写成：
import { reactive, getCurrentInstance } from 'vue';
特点：
必须用 花括号 {}；
名字 必须完全匹配 导出的名字；
一个文件可以导出多个命名成员。
2. 生命周期钩子
Vue 组件的“生命周期钩子”就是在组件从创建到销毁的整个过程中，Vue 自动触发的一系列回调函数。
你可以在这些时机点上，插入自己的逻辑。
| 阶段 | 选项式 API 写法 | 组合式 API 写法 | 触发时机 |
|---|---|---|---|
| 🧱 创建阶段 | beforeCreate() | ❌（不支持，setup 前执行） | 组件实例刚被创建，data、props 还没初始化 |
created() | ❌（不支持，setup 时执行） | 数据已初始化，但 DOM 还没生成 | |
| 🧩 挂载阶段 | beforeMount() | onBeforeMount() | 模板还未挂载到真实 DOM 上 |
mounted() | onMounted() | 模板渲染完，DOM 已插入页面 | |
| 🔄 更新阶段 | beforeUpdate() | onBeforeUpdate() | 响应式数据更新前（DOM 还没变） |
updated() | onUpdated() | 响应式数据更新后（DOM 已更新） | |
| ❌ 卸载阶段 | beforeUnmount() | onBeforeUnmount() | 组件将要销毁（可清理定时器等） |
unmounted() | onUnmounted() | 组件已销毁（DOM 已移除） | |
| 🧭 错误捕获 | errorCaptured(err, vm, info) | onErrorCaptured() | 子组件发生错误时触发 |
| 🌐 路由组件专用 | activated() | onActivated() | <KeepAlive> 缓存组件被激活时 |
deactivated() | onDeactivated() | <KeepAlive> 缓存组件被隐藏时 |
Vue 3 生命周期执行顺序
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted
注意：
在 Vue 3 的 <script setup> 语法中，
beforeCreate 和 created 已经被「合并进 setup」阶段了，
即 setup 执行时间 ≈ created。
常用的生命周期用途
| 钩子 | 常见用途 |
|---|---|
| onMounted | 初始化数据、访问 DOM、调用接口 |
| onBeforeUpdate | 更新前做数据快照 |
| onUpdated | 数据更新后调整样式或位置 |
| onBeforeUnmount | 清理定时器、事件监听器 |
| onUnmounted | 释放资源、断开连接 |
| onErrorCaptured | 捕获子组件的错误日志 |
3. onMounted() 执行细节
我们细分三种情况来看：
1. 刷新浏览器（F5 / Ctrl+R）
整个应用会被销毁并重新创建：
根组件重新挂载；
当前页面组件也重新创建；
所以 onMounted() 一定会执行。
例如：
onMounted(() => {console.log("页面挂载：执行初始化逻辑");
});
刷新后你会看到控制台打印一次。
2. 从其他路由跳转到当前页面
比如从 /home → /user：
/user 对应的组件会新创建并挂载；
所以 onMounted() 也会执行。
换句话说：
每次切换“不同的组件页面”，新的组件都会走一次完整生命周期：
setup() → onMounted()。
3. 组件被 <keep-alive> 缓存的情况
如果你的 <RouterView /> 是包在 <keep-alive>里的，比如：
<keep-alive><RouterView />
</keep-alive>
那被缓存的组件在切换回来时不会重新挂载。
此时：
不会执行 onMounted()
会执行 onActivated()
例子：
onMounted(() => {console.log('第一次进入页面');
});
onActivated(() => {console.log('再次返回页面');
});
结果：
第一次进入：打印“第一次进入页面”
第二次返回（从别的路由回来）：打印“再次返回页面”