10月25日 - 技术栈

1. ES6 模块导入语法（import）

带 {} 的 import（解构导入）：导入模块中按名字导出的（named exports）。
不带 {} 的 import：导入模块中默认导出的（default export）。

默认导出（default export）

导出时这样写：

utils/request.js

javascript 复制代码

export default {
  get() {},
  post() {}
}

导入时写法是：

javascript 复制代码

import request from '../utils/request'

特点：

default 导出的模块可以用任意名字接收；

因为一个文件只能有一个默认导出。

例如：

javascript 复制代码

import abc from '../utils/request' // 也能用abc代替request

命名导出（named export）

导出时这样写：

vue内部就是这种

javascript 复制代码

export function reactive() {}
export function getCurrentInstance() {}

或：

javascript 复制代码

// 另一种写法
function reactive() {}
function getCurrentInstance() {}

export { reactive, getCurrentInstance }

导入时要写成：

javascript 复制代码

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() 执行细节

我们细分三种情况来看：

刷新浏览器（F5 / Ctrl+R）

整个应用会被销毁并重新创建：

根组件重新挂载；

当前页面组件也重新创建；

所以 onMounted() 一定会执行。

例如：

javascript 复制代码

onMounted(() => {
  console.log("页面挂载：执行初始化逻辑");
});

刷新后你会看到控制台打印一次。

从其他路由跳转到当前页面

比如从 /home → /user：

/user 对应的组件会新创建并挂载；

所以 onMounted() 也会执行。

换句话说：
每次切换"不同的组件页面"，新的组件都会走一次完整生命周期 ：

setup() → onMounted()。

组件被 <keep-alive> 缓存的情况

如果你的 <RouterView /> 是包在 <keep-alive>里的，比如：

复制代码

<keep-alive>
  <RouterView />
</keep-alive>

那被缓存的组件在切换回来时不会重新挂载。

此时：

不会执行 onMounted()

会执行 onActivated()

例子：

复制代码

onMounted(() => {
  console.log('第一次进入页面');
});
onActivated(() => {
  console.log('再次返回页面');
});

结果：

第一次进入：打印"第一次进入页面"

第二次返回（从别的路由回来）：打印"再次返回页面"