之前说了会更新 gsap 动画教程，我们先来个开胃菜，看看最近练习的 demo 是否有同学愿意一起学习和交流。
既然你都点进来看帖子了，来都来了，留下来喝个小茶，看个小动画再走呗！
视频被切为了动画帧，随着滚动鼠标滚动或者触控板滑动而不断播放视频。
图片随着滚动鼠标滚动或者触控板滑动而不断变化，第二屏会有一定的视差滚动的效果。
主要涉及 clip-path 属性的变化。
图片随着滚动鼠标滚动或者触控板滑动而不断变化，主要是 transform 属性上的变化。
欢迎加入交流群一起进步！
前两周我做了一个零侵入的接口 Mock 插件。还写了篇掘金文章记录了一下：juejin.cn/post/757098…
此前用 Popup 弹窗做联调，窗小、易误关、操作繁琐；
于是我重构为 Sidebar 常驻侧栏：规则随时可见，刷新也不丢。
换成 Sidebar 侧边栏：钉在页面右边，想开就开，数据都存着，再也不怕手抖关掉。即使刷新页面，规则也不会丢，重新打开就能继续用
接入 AI 自动生成：描述你想要的数据，或者直接贴接口的 TypeScript 类型，AI 秒出结构化数据。手写？不存在的
支持延时和状态码：可以模拟慢接口（延时 3 秒）、接口报错（返回 500）等真实场景
现在用起来爽多了，前端开发不用干等后端，自己就能把页面跑起来。
下文附安装与使用指南，欢迎试用与反馈。
如果你现在还在用 Popup 弹窗做 Mock，或者还在一个字一个字敲 JSON， 真心建议试试 Sidebar + AI 这套，用完你就知道什么叫"真香"。
登录
持续优化中,欢迎反馈与建议建设中: 调试与管理：导入导出、规则分组、Network 面板标识等；性能与匹配体验持续优化，欢迎反馈注：支持拦截ajax和fetch请求
打开代码仓库，按以下方操作下载插件包。安装包为 zip，请先解压。
下载与解压
参考示意图：
chrome://extensions/
参考示意图：
gitee 仓库链接的同理，在仓库页点击“发行版（Release）”, 进入最新版本页面，下载插件包即可
AI 前置准备
sk-9fa67c84581d4f67b61039ff8b199baa
示例：
DeepSeek 官网申请key示例:
| 特性 | Popup | Sidebar |
|---|---|---|
| 显示空间 | 小（~400x600px） | 大（可调整宽度） |
| 操作便捷性 | 点击外部就关闭 | 固定显示，不怕误触 |
| 与页面交互 | 互斥 | 可同时显示 |
| 数据持久化 | 关闭即丢失 | 刷新页面也保留 |
这块就两件事：
效果图：
interface User {
id: number;
name: string;
age: number;
email: string;
}
效果图：
目的：把带占位符的路径，转成更稳的正则，方便在开发态拦截请求
常用示例：
效果图：
这块很直观，给你三种编辑入口，改完就是生效：
放大弹窗改：点击“放大”，全屏 JSON 编辑器更适合改大结构或深层嵌套，改完“验证”一下再“保存”
卡片内联改：在规则卡片下方的“Mock 响应”树视图，鼠标双击某个值就能直接编辑，编辑完进行回车保存。这个适合改小字段（比如把 data.hits.total 从 1 改成 20 ）
效果图：
设置延时 3 秒，模拟慢接口：
演示效果图:
一键切换不同状态码：
效果图:
配置文件：
{
"manifest_version": 3,
"name": "AI Mock",
"version": "2.0.0",
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel",
"storage",
"scripting"
],
"host_permissions": [
"<all_urls>"
]
}
打开侧边栏：
// background.ts
chrome.action.onClicked.addListener(async (tab) => {
await chrome.sidePanel.open({ windowId: tab.windowId });
});
关键区别：
劫持实现原理参考我上篇文章：【前端效率工具】再也不用 APIfox 联调！零侵入 Mock，全程不改代码、不开代理juejin.cn/post/757098…
核心代码：
injected.ts
const originalFetch = window.fetch;
window.fetch = async function(input, init) {
const url = typeof input === 'string' ? input : input.url;
const method = init?.method || 'GET';
// 查找匹配的规则
const rule = await findMatchedRule(url, method);
if (rule) {
// 延时处理
if (rule.delay > 0) {
await new Promise(resolve => setTimeout(resolve, rule.delay));
}
// 返回指定状态码
return new Response(
JSON.stringify(rule.data),
{
status: rule.statusCode || 200,
statusText: getStatusText(rule.statusCode),
headers: { 'Content-Type': 'application/json' }
}
);
}
// 不拦截，调用原始 fetch
return originalFetch.apply(this, arguments as any);
};
// 状态码文本映射
function getStatusText(code: number): string {
const statusTexts: Record<number, string> = {
200: 'OK',
400: 'Bad Request',
401: 'Unauthorized',
403: 'Forbidden',
404: 'Not Found',
500: 'Internal Server Error',
502: 'Bad Gateway',
503: 'Service Unavailable',
504: 'Gateway Timeout'
};
return statusTexts[code] || 'Unknown';
}
匹配规则：
async function findMatchedRule(url: string, method: string) {
// 从 storage 获取规则
const { rules } = await chrome.storage.local.get('rules');
return rules.find((rule: Rule) => {
if (!rule.enabled) return false;
// 方法匹配
if (rule.method !== 'ALL' && rule.method !== method) {
return false;
}
// URL 匹配
if (rule.matchMode === 'contains') {
return url.includes(rule.url);
} else if (rule.matchMode === 'exact') {
return url === rule.url;
} else if (rule.matchMode === 'regex') {
return new RegExp(rule.url).test(url);
}
return false;
});
}
支持的匹配模式：
/api/user 可以匹配 /api/user/list、/api/user/detail
/api/user/\d+ 可以匹配 /api/user/123
Prompt 设计：
const buildPrompt = (userInput: string) => {
return `
你是一个专业的 Mock 数据生成助手。
用户需求：${userInput}
请生成符合以下规范的 JSON 数据：
1. 必须是有效的 JSON 格式
2. 包含常见的响应结构（code, msg, data）
3. 数据要真实合理（中文姓名、真实邮箱格式等）
4. 如果是列表，生成 2-3 条示例数据
只返回 JSON，不要有其他说明文字。
`.trim();
};
生成逻辑：
const generateMockData = async () => {
if (!aiPrompt.value) {
ElMessage.warning('请输入数据描述');
return;
}
generating.value = true;
try {
const response = await fetch('YOUR_AI_API_ENDPOINT', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
prompt: buildPrompt(aiPrompt.value),
model: 'gpt-3.5-turbo'
})
});
const data = await response.json();
// 解析 AI 返回的 JSON
const mockData = JSON.parse(data.choices[0].message.content);
// 填充到编辑器
form.data = JSON.stringify(mockData, null, 2);
ElMessage.success('✨ AI 生成成功');
} catch (error) {
ElMessage.error('生成失败：' + error.message);
} finally {
generating.value = false;
}
};
interface Rule {
id: string;
remark: string; // 规则名称
url: string; // URL 匹配
matchMode: 'contains' | 'exact' | 'regex';
method: 'ALL' | 'GET' | 'POST' | 'PUT' | 'DELETE';
statusCode: number; // 🆕 状态码（默认 200）
delay: number; // 🆕 延时（毫秒，默认 0）
data: Record<string, any>; // Mock 数据
enabled: boolean; // 是否启用
createdAt: number; // 创建时间
}
存储和读取：
// 保存规则
const saveRules = async () => {
await chrome.storage.local.set({ rules: rules.value });
};
// 加载规则
const loadRules = async () => {
const result = await chrome.storage.local.get('rules');
rules.value = result.rules || [];
};
// 监听变化
chrome.storage.onChanged.addListener((changes, areaName) => {
if (areaName === 'local' && changes.rules) {
rules.value = changes.rules.newValue;
}
});
这次重构主要做了四件事：
这四个功能组合起来，基本覆盖了前端开发中 90% 的 Mock 需求。
如果你也在等后端接口，或者被 Popup 小窗口折磨过， 真的可以试试这个插件，保证你用了就回不去了。
消息推送是提升 App 用户活跃度和留存率的关键能力。对于采用 UniApp 开发的跨端应用，DCloud 官方提供的 UniPush 服务无疑是集成推送功能最高效选择。
本文将以一名开发者的视角，手把手带你完成 从项目初始化到成功接收第一条推送消息 的完整流程。你将学会：
技术栈：UniApp + UniPush（华为、小米等厂商推送配置将在下篇介绍）
manifest.json 文件，进入 “App模块配置” 选项卡，勾选 “Push(消息推送)” 模块，并确保选中 “UniPush” 作为具体服务。
为什么必须使用自定义基座？
UniApp 的标准运行基座（标准真机运行包）所使用的 DCloud 公有证书，其推送标识（CID）无法用于正式推送。只有使用你自己 App 的正式证书（或调试证书）打包的自定义基座，才能获得真实、有效的 CID。
制作步骤：
在 HBuilderX 顶部菜单，选择 运行 -> 运行到手机或模拟器 -> 制作自定义调试基座。
在弹出的界面中，你需要为 Android 平台提供应用签名证书。
点击 “打包” ，等待云端完成自定义基座的制作。
如何使用：
制作完成后，运行项目时，务必在运行菜单中选择“自定义调试基座” ，而非“运行标准基座”。只有运行在自定义基座上，后续的推送测试才有效。
推送能力依赖于 DCloud 的后台服务，因此需要在开发者中心完成配置。
进入开发者中心：访问 DCloud 开发者中心，在 “应用列表” 中找到你的项目。
配置应用信息：
CID 是 UniPush 服务识别每台设备的唯一 ID。在客户端，我们使用 uni.getPushClientId API 获取。
关键注意事项（时序问题）：
推送服务初始化需要时间，应用启动后立即调用此 API 可能返回空值。一个稳健的做法是延时获取或在监听事件中获取。
推荐实现方案：
// 在 App.vue 的 onLaunch 中，或首个页面的 onLoad 中调用
function initUniPush() {
// 方案1：延时获取（简单直接）
setTimeout(() => {
uni.getPushClientId({
success: (res) => {
const cid = res.cid;
console.log('设备推送标识CID:', cid);
// 重要：将 CID 发送到你的业务服务器进行关联存储
// uploadCidToServer(cid);
// 可通过 Vuex 或全局事件更新 UI 状态
uni.$emit('push-cid-ready', cid);
},
fail: (err) => {
console.error('获取CID失败:', err);
// 处理失败逻辑，如重试
}
});
}, 3000); // 延迟 3 秒，可根据实际情况调整
// 方案2：监听事件（更精准）
// uni.onPushMessage((res) => {...}); // 接收推送消息
// 也可以在服务初始化成功的事件中获取CID
}
登录 DCloud 后台：进入你的应用，找到 “UniPush” 功能模块。
创建推送：
验证结果：
至此，你已经完成了 UniPush 在线推送的核心流程。我们来总结一下关键点：
✅ 正确流程：创建项目 → 启用模块 → 制作自定义基座（关键！） → 平台配置 → 获取CID → 后台推送。
⚠️ 核心要点：
前段时间在做一个产品展示页，需要实现卡片翻转效果。本以为很简单，结果翻转的时候总是"穿帮"——正面和背面同时显示，或者背面的文字是镜像的。折腾了半天才发现，原来是 backface-visibility 这个属性没搞明白。
今天就来聊聊这个 CSS 属性。
🎮 在线演示：frontend-learning.pages.dev/animation/d…
建议边看文章边打开演示页面，所有效果都可以直接交互体验。
backface-visibility 控制的是：当一个元素的背面朝向你时，这个背面是否可见。
听起来有点绕？没关系，我们慢慢来。
这是理解整个属性的关键。很多人（包括我）一开始都没搞清楚这个"背面"到底是什么。
关键理解：每个 HTML 元素就像一张纸，天生就有正面和背面。当你用 rotateY(180deg) 翻转它时，你看到的是它的背面（就像纸翻过来，文字是镜像的）。
来看个最简单的例子：
<div
style="
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 40px;
transform: rotateY(180deg);
"
>
HELLO
</div>
你会看到什么？镜像的 HELLO。这就是元素的背面。
backface-visibility: hidden 的作用就是：当背面朝向你时，让它变透明。
我做了四个对比演示，帮你理解这个属性是怎么工作的。
<div style="position: relative;">
<div class="front" style="position: absolute;">FRONT</div>
<div class="back" style="position: absolute;">BACK</div>
</div>
结果：只看到 BACK
原因：两个都是 absolute，BACK 在上层覆盖了 FRONT
这个很好理解，就是普通的 DOM 层叠。
.back {
transform: rotateY(180deg);
}
结果：看到镜像的 BACK 原因：BACK 翻转后，你看到的是它的背面（文字镜像）
这里就出现问题了！虽然 BACK 翻转了，但你看到的是它的背面，文字是反的。
.back {
transform: rotateY(180deg);
backface-visibility: hidden; /* 关键！*/
}
结果：✅ 只看到 FRONT 原因：BACK 的背面被隐藏，露出下面的 FRONT
现在好了！BACK 的背面不可见了，所以你能看到下面的 FRONT。
.front,
.back {
backface-visibility: hidden; /* 两面都隐藏背面 */
}
.back {
transform: rotateY(180deg);
}
/* 悬停时翻转父容器 */
.card-container:hover .card {
transform: rotateY(180deg);
}
结果：✅ 悬停完美翻转 原理：
这就是完美的卡片翻转效果！
.element {
backface-visibility: visible | hidden;
}
visible：默认值，背面可见hidden：背面不可见就这两个值，没别的了。
这是我当时最困惑的地方。既然翻转后正面和背面都旋转了 180°，为什么不能直接这样写？
/* ❌ 错误写法 */
.card-container:hover .front {
transform: rotateY(180deg);
}
.card-container:hover .back {
transform: rotateY(180deg);
}
看起来很合理对吧？但实际上完全不行。
关键在于：CSS 的 transform 属性会被完全覆盖，而不是累加。
/* 初始状态 */
.front {
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
/* 悬停后 */
.card-container:hover .front {
transform: rotateY(180deg); /* ✓ 从 0° 变成 180° */
}
.card-container:hover .back {
transform: rotateY(180deg); /* ✗ 从 180° 变成 180°，没变化！ */
}
背面的初始值 rotateY(180deg) 被新值 rotateY(180deg) 覆盖，但因为值相同，所以背面根本没动！
/* ✅ 正确写法 */
.card-container:hover .card {
transform: rotateY(180deg); /* 旋转整个父容器 */
}
这样做的原理是：子元素的 transform 是相对于父元素的坐标系。
初始状态：
.card (0°)
├── .front: rotateY(0°) 相对于 .card → 绝对位置 0°
└── .back: rotateY(180°) 相对于 .card → 绝对位置 180°
悬停后：
.card (180°) ← 整个坐标系旋转了
├── .front: rotateY(0°) 相对于 .card → 绝对位置 0° + 180° = 180°
└── .back: rotateY(180°) 相对于 .card → 绝对位置 180° + 180° = 360° = 0°
父元素旋转时，子元素的相对角度不变，但绝对角度会改变。这才是正确的翻转逻辑。
标准的卡片翻转需要三层 DOM 结构：
<div class="爷容器">
<!-- perspective（观察点） -->
<div class="父容器">
<!-- transform-style + rotateY（翻转者） -->
<div class="正面"></div>
<!-- backface-visibility（被翻转的面） -->
<div class="背面"></div>
<!-- backface-visibility（被翻转的面） -->
</div>
</div>
爷容器：设置 perspective
.card-container {
perspective: 1000px; /* 必须在父元素上 */
}
perspective 必须设置在父元素上，才能对子元素的 3D 变换生效父容器：设置 transform-style 和执行 rotateY
.card {
transform-style: preserve-3d; /* 保持 3D 空间 */
transition: transform 0.6s;
}
.card-container:hover .card {
transform: rotateY(180deg); /* 翻转整个卡片 */
}
preserve-3d：让子元素保持在 3D 空间中（而不是被压平）子元素：正面和背面
.card-front,
.card-back {
position: absolute;
backface-visibility: hidden; /* 关键！隐藏背面 */
}
.card-back {
transform: rotateY(180deg); /* 背面预先翻转 */
}
position: absolute：让两个面重叠在同一位置如果只有两层：
/* ❌ 错误 */
.card {
perspective: 1000px;
transform: rotateY(180deg);
}
问题：perspective 和 transform 在同一个元素上，perspective 不会对自己的 transform 生效，只会对子元素生效。结果就是没有透视效果。
直接复制这个模板，改改样式就能用：
<!-- HTML 结构 -->
<div class="card-container">
<!-- 爷容器：观察点 -->
<div class="card">
<!-- 父容器：翻转者 -->
<div class="card-front">正面内容</div>
<div class="card-back">背面内容</div>
</div>
</div>
/* 第 1 层：爷容器 - 设置观察点 */
.card-container {
perspective: 1000px; /* 必须在父元素上 */
}
/* 第 2 层：父容器 - 执行翻转 */
.card {
transform-style: preserve-3d; /* 保持 3D 空间 */
transition: transform 0.6s;
}
.card-container:hover .card {
transform: rotateY(180deg); /* 翻转整个卡片 */
}
/* 第 3 层：子元素 - 正面和背面 */
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 关键！隐藏背面 */
}
.card-back {
transform: rotateY(180deg); /* 背面预先翻转 */
}
这个模板是标准写法，三层结构缺一不可。
backface-visibility 只在 3D 变换（如 rotateY, rotateX）中有意义，2D 旋转（rotate）不会产生背面hidden 可以让浏览器跳过背面的渲染，提升性能-webkit- 前缀backface-visibility 这个属性本身很简单，就两个值。但要真正理解它，需要搞清楚几个概念：
backface-visibility: hidden 让背面朝向你时变透明最后再推荐一次我做的演示页面，里面有所有场景的交互演示和详细说明：
问：Vue3 中生命周期函数的执行顺序是怎样的？watch / onMounted / onBeforeUnmount 如何配合使用？
面试官重点考察：
setup() 执行
onBeforeMount
onMounted
响应式数据变化触发 watch
'pre'，在 DOM 更新前执行'post' → 在 DOM 更新后执行onBeforeUnmount
onUnmounted
setup() ← 初始化 state / computed / watch
│
onBeforeMount() ← 挂载前
│
DOM 渲染
│
onMounted() ← 挂载完成，可操作真实 DOM
│
响应式数据变化
│
watch() ← flush: pre/post/sync 执行
│
用户操作 / 卸载组件
│
onBeforeUnmount()
│
onUnmounted()
<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
const count = ref(0)
watch(count, (newVal) => {
console.log('watch count:', newVal)
}, { flush: 'post' })
onMounted(() => {
console.log('mounted')
})
onBeforeUnmount(() => {
console.log('beforeUnmount')
})
setTimeout(() => count.value++, 1000)
</script>
输出顺序：
mounted
watch count: 1 ← flush: post，DOM 已更新
beforeUnmount ← 卸载组件时
'pre'（默认） → 在 DOM 更新前执行'post' → 在 DOM 更新后执行'sync' → 同步执行，立即触发'pre' 在 onMounted 前可能执行一次（第一次访问依赖会立即触发）Vue3 生命周期顺序：
setup → onBeforeMount → onMounted → 响应式 watch → onBeforeUnmount → onUnmounted；watch flush 决定响应式回调执行时机，可精确控制 DOM 更新前后。
问：在 Vue3 中，如何优化性能？尤其是响应式系统、虚拟 DOM、静态节点、列表渲染等方面。
减少不必要的响应式对象
reactive 会递归代理对象，避免对大量静态数据使用 reactivereadonly
使用 shallowReactive / shallowRef
避免过度监听
computed 缓存
PatchFlag
静态节点提升
合理使用 key
v-for + key
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
虚拟滚动 / 懒渲染
vue-virtual-scroller 等组件避免嵌套 v-for
v-on / 方法绑定
<!-- 不推荐 -->
<button @click="count++"></button>
<!-- 推荐 -->
<button @click="handleClick"></button>
组件拆分 / 懒加载
<Suspense> 或动态 import 懒加载大型组件const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'))
<template>
<ul>
<li v-for="item in visibleList" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script setup>
import { ref, computed } from 'vue'
const list = ref([...Array(10000).keys()].map(i => ({ id: i, name: `Item ${i}` })))
// 虚拟滚动或分页，仅显示部分
const visibleList = computed(() => list.value.slice(0, 100))
</script>
Vue3 性能优化核心：精准响应式（Proxy + computed 缓存）、虚拟 DOM PatchFlag + 静态节点提升、列表渲染优化（v-for + key + 虚拟滚动），结合组件拆分与懒加载，实现高效渲染。
问：Vue3 响应式系统中 effect 是什么？依赖是如何收集和触发的？
面试官希望你理解：
effect
依赖收集（track）
get 会调用 track
依赖触发（trigger）
set 调用 trigger
effect 栈
effectStack = []
1. 创建 effect：
effect(() => { console.log(state.count) })
2. 执行 effect：
└─ push effect 到 effectStack
│
▼
Proxy get 拦截 state.count
│
▼
track(effectStack.top) → 保存依赖
3. 数据变化：
state.count++
└─ Proxy set 拦截
│
▼
trigger(state.count.deps) → 执行依赖的 effect
│
▼
effectStack.top 被重新执行 → DOM / computed 更新
关系总结：
响应式对象 property → Set(effect1, effect2)
effect1 / effect2 → function(callback)
依赖变化 → trigger → 执行 effect
import { reactive, effect } from 'vue'
const state = reactive({ count: 0 })
effect(() => {
console.log('count =', state.count)
})
state.count++ // 自动触发 effect
state.count++ // 再次触发 effect
分析：
effect 执行 → push 到 effectStackstate.count 的 get 调用 track → 收集 effectstate.count++ 的 set 调用 trigger → 执行 effect → 输出最新值lazy = true
.value 时触发执行并收集依赖Vue3 响应式通过 Proxy 拦截访问，effect 栈管理当前激活 effect，track 收集依赖，trigger 触发依赖执行，实现高性能、精准响应式更新。
问：Vue3 中虚拟 DOM 是如何优化性能的？PatchFlag 和静态节点提升的作用是什么？
这是面试官非常喜欢问的高级题，尤其考察对 Vue3 编译器优化的理解。
虚拟 DOM 本质
PatchFlag（编译标记）
在编译阶段，为 VNode 添加 标记字段，标识节点变化类型
作用：
典型标记：
TEXT → 文本变化CLASS → class 变化STYLE → style 变化PROPS → 普通 props 变化FULL_PROPS → 所有 props 都可能变化HYDRATE_EVENTS → 事件变化静态节点提升（Hoist Static）
模板 → 编译器 → VNode + PatchFlag + 静态提升
响应式数据变化 → 生成新 VNode
│
▼
Diff + Patch
│
▼
仅更新变化的节点/属性
<template>
<div>
<h1>{{ title }}</h1> <!-- 动态内容 → TEXT PatchFlag -->
<p class="desc">静态描述</p> <!-- 静态节点 → Hoist Static -->
</div>
</template>
<h1> 会每次响应式数据变化时 diff<p> 被提升为 静态节点，不会重复创建或比较如果用 Vue3 编译输出 VNode，会生成类似：
const _hoisted_1 = /*#__PURE__*/createVNode("p", { class: "desc" }, "静态描述")
...
createVNode("div", null, [
createVNode("h1", null, toDisplayString(title), 1 /* TEXT */),
_hoisted_1
])
PatchFlag 用于标记节点内部变化类型
key 用于 列表节点快速定位变化
结合使用：
__DEV__ 模式下 VNodevue-next 的源码分析Vue3 通过 PatchFlag 标记节点变化类型和静态节点提升，减少不必要的 Diff 和 VNode 创建，从而显著提升渲染性能。
问：Vue3 响应式是如何实现的？Proxy、effect 栈和依赖追踪是怎么协作的？
这是高频面试深度题，面试官一般会追问 “为什么 Vue3 性能比 Vue2 好”。
响应式核心是 Proxy
get、set、deleteProperty 等操作依赖收集（Track）
get 会被触发effect 栈
get 触发时，依赖收集使用栈顶 effect触发依赖（Trigger）
set 改变时响应式对象被访问
│
▼
Proxy get 拦截
│
▼
track(effect) 收集依赖
│
▼
数据变化
│
▼
Proxy set 拦截
│
▼
trigger(effect) 触发依赖执行
import { reactive, effect } from 'vue'
const state = reactive({ count: 0 })
effect(() => {
console.log('count =', state.count)
})
state.count++ // 自动触发 effect，打印最新值
解释：
reactive 创建 Proxyeffect 包裹回调函数并入栈state.count → track 收集依赖state.count → trigger 执行 effectVue3 响应式原理：通过 Proxy 拦截对象操作 + effect 栈管理当前执行上下文 + track/trigger 精准收集依赖，实现高性能、可缓存、可嵌套的响应式系统。
| 特性 | computed | watch |
|---|---|---|
| 用途 | 计算衍生数据 | 监听变化执行副作用 |
| 返回值 | 会返回值并缓存 | 无返回值（主要触发回调） |
| 执行时机 | 访问 .value 时才执行 |
数据变化时立即触发（flush 可控制） |
| 缓存机制 | ✅ 会缓存，依赖未变不重新计算 | ❌ 不缓存，每次依赖变化都会触发回调 |
| 依赖收集 | 自动收集依赖 | 需手动指定监听对象（或 watchEffect 自动收集） |
| 可获取 oldValue | ❌ | ✅ |
| 异步支持 | ❌ 仅同步计算 | ✅ 可做异步副作用（API、DOM 操作等） |
| 适合场景 | 纯逻辑计算、UI 展示数据 | 副作用逻辑、异步请求、操作 DOM 等 |
computed = 计算属性（惰性求值 + 缓存）
watch = 数据侦听器（观察者模式）
computed
effect + dirty flagwatch
pre/post/sync 控制执行时机computed 本质上是一个 带缓存的响应式副作用：
依赖收集
computed.value 时，Vue 会触发其内部 effect，追踪它依赖的响应式数据（ref 或 reactive 对象）。惰性求值（lazy）
dirty = false
缓存机制
dirty = true
.value 时重新计算并更新缓存不可获取旧值
示意流程：
访问 computed.value → 检查 dirty
├─ dirty = true → 执行 getter → 缓存值 → dirty = false
└─ dirty = false → 直接返回缓存值
依赖变化 → effect 标记 dirty = true
示例代码：
import { ref, computed } from 'vue'
const count = ref(1)
const double = computed(() => count.value * 2)
console.log(double.value) // 2
count.value++
console.log(double.value) // 4，重新计算
watch 本质是一个 响应式数据的观察者（Watcher） ，用于执行副作用：
手动依赖选择
响应式触发
可获取 oldValue / newValue
异步可选
没有缓存
示意流程：
watch(reactiveData, callback)
└─ 内部创建 effect
依赖变化 → 触发 effect → callback(newValue, oldValue)
示例代码：
import { ref, watch } from 'vue'
const count = ref(1)
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`)
})
count.value++ // 触发 watch 回调
| 特性 | computed | watch |
|---|---|---|
| 内部机制 | effect + dirty flag | effect 直接触发回调 |
| 触发时机 | 访问 .value 时（懒执行） |
数据变化时立即触发 |
| 缓存 | ✅ 缓存上次计算值 | ❌ 不缓存，每次触发回调 |
| oldValue | ❌ 无 | ✅ 有 |
| 使用目的 | 衍生数据计算 | 执行副作用（异步、DOM 操作等） |
| 特性 | computed | watch |
|---|---|---|
| 依赖收集 | 自动依赖追踪 | 需要手动指定依赖 |
| 返回值 | 会缓存（lazy evaluation） | 不缓存 |
| 用途 | 计算衍生数据 | 执行副作用（API、DOM操作等） |
| 执行时机 | 访问时才执行 | 数据变化时触发 |
| 获取 oldValue | ❌ | ✔ 可以获取 |
| 适用场景 | 纯计算逻辑 | 监听变化做异步或副作用处理 |
<script setup>
import { ref, computed } from 'vue'
const count = ref(1)
const double = computed(() => count.value * 2)
console.log(double.value) // 2
count.value++
console.log(double.value) // 4，computed 会自动更新并缓存
</script>
特点：
double.value 时才执行<script setup>
import { ref, watch } from 'vue'
const count = ref(1)
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`)
})
count.value++ // 触发 watch 回调
特点：
oldVal
答：
watch 或 watchEffect
答：
| 特性 | computed | watchEffect |
|---|---|---|
| 返回值 | 缓存返回值 | 无返回值 |
| 依赖 | 自动收集 | 自动收集 |
| 执行时机 | 访问 value 时才执行 | 默认立即执行一次 |
| 用途 | 衍生数据 | 副作用逻辑 |
答：
const count = ref(1)
const double = computed(() => count.value * 2)
double.value++ // ❌ 报错，computed 默认只读
computed({ get, set }) 创建可写 computedconst double = computed({
get: () => count.value * 2,
set: val => count.value = val / 2
})
computed 用于缓存衍生数据，懒执行、自动依赖收集；watch 用于监听数据变化触发副作用，可获取新旧值。computed 更轻量，watch 更灵活，适合异步或副作用逻辑。
虚拟 DOM 是 Vue 内部的一种 JavaScript 对象表示的 DOM 树，抽象出真实 DOM 的结构和属性。
示例：
{
tag: 'div',
props: { id: 'app' },
children: [
{ tag: 'span', children: 'Hello' }
]
}
它是内存中的 DOM 描述，不是浏览器真实 DOM。
| 优势 | 解释 |
|---|---|
| 性能优化 | 批量 diff → 最小化真实 DOM 更新 |
| 平台无关 | 可渲染在浏览器、服务端、Native、Canvas |
| 响应式结合 | Vue 响应式系统修改数据 → 生成新 VNode → diff → patch |
| 可调试 | 内存中对象易于分析、调试、测试 |
| 跨渲染器 | Vue3 可以通过 renderer API 渲染不同平台 |
import { h, render } from 'vue'
const vnode = h('div', { id: 'app' }, [
h('span', 'Hello Vue3')
])
render(vnode, document.getElementById('root'))
流程解释：
h() → 创建 VNoderender() → 挂载或更新 DOM回答：
回答：
PatchFlag 静态提升
Keyed Diff
key 快速比较列表节点Fragment 支持
Teleport / Suspense
回答：
v-for key + 虚拟滚动等优化回答：
答案要点：
虚拟 DOM 是 Vue 内存中 DOM 描述对象，通过 diff 算法实现最小化更新，避免直接操作真实 DOM，Vue3 通过 PatchFlag、静态提升和 Proxy 响应式极大优化了性能。
nextTick 原理是什么？为什么需要它？nextTick 用来在 下一轮 DOM 更新完成之后 执行回调。
因为 Vue 的 DOM 更新是 异步的、批处理的，当你修改响应式数据时，DOM 并不会立即更新，而是放到一个任务队列里，等同一轮事件循环结束后统一更新。因此，如果你想操作“更新后的 DOM”，必须使用 nextTick。
Vue 的 nextTick 本质上是：
使用 微任务（Promise.then）优先 实现的异步回调机制，将任务推入事件循环的下一 tick 执行。
Vue3 实现优先级：
为什么用微任务？
这句话面试官很爱听：
Vue3 中 DOM 更新是异步批处理的，而 nextTick 就是让代码在 DOM 更新完后再执行。
这是面试官 100% 会追问的。
频繁数据变化会导致频繁 DOM 重绘、回流，性能崩溃。
多次状态修改：
count.value++
count.value++
count.value++
Vue 不会更新 3 次，而是：
合并所有状态变更 → 执行一次 DOM 更新
非常好记：
“数据改完不是马上改 DOM，需要 nextTick 等 Vue 批量改完 DOM 后再执行代码。”
你连续提交很多 DOM 更新，但 Vue 不会立即执行，而是推入任务队列。
然后：
顺序大概是：
同步代码 → Vue 收集更新 → 微任务执行 → DOM 更新 → nextTick 执行
count.value++
await nextTick()
console.log(divRef.value.innerText) // 拿到的是更新后的 DOM
面试官看到你能手写，直接对你印象爆炸加分。
const callbacks = []
let pending = false
function nextTick(cb) {
callbacks.push(cb)
if (!pending) {
pending = true
Promise.resolve().then(() => {
pending = false
callbacks.forEach(fn => fn())
callbacks.length = 0
})
}
}
解释：
回答：
异步。Vue3 会将多次数据修改合并在一起，通过微任务在下一个 tick 统一更新 DOM。
nextTick(() => {}) 有时还是拿不到 DOM？回答：
因为你监听的是数据变化，而不是 DOM 更新；你需要确保 DOM 渲染参与了更新。
某些场景必须使用await nextTick()连续两次，或用flush: 'post'。
回答：
nextTick：等待 DOM 更新之后 执行flush: 'post'：让回调在 DOM 更新之后执行（类似 nextTick）例如：
watch(count, () => {
console.log('DOM 已更新')
}, { flush: 'post' })
二者都可以“等待 DOM 更新”，但：
nextTick 用于数据修改后手动等待 DOM
post 用于 侦听器自动等待 DOM
回答：
不是，React 也有类似机制，所有虚拟 DOM 框架都有异步批处理。
Vue 的 nextTick 利用 Promise 微任务，将回调延迟到 DOM 异步批处理更新完成后执行，用于保证你获取到的是最新 DOM。
来详细解释 Vue3 中 watch 和 computed 的区别，从原理、用途和执行方式多维度展开，让你面试答题时一说就懂。
这是 Vue 面试必考题，至少 90% 面试官会问。
Vue3 中父子组件通信有 七 大常用方式：
父组件：
<Child :msg="text" />
子组件：
defineProps({
msg: String
})
子组件：
const submit = () => { ... }
defineExpose({ submit })
父组件：
<Child ref="childRef" />
childRef.value.submit()
使用场景：
子组件：
const emit = defineEmits(['update'])
emit('update', newValue)
父组件：
<Child @update="handleUpdate" />
特点：
<Child v-model="value" />
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
emit('update:modelValue', 123)
本质只是 props + emit 的语法糖。
祖先组件：
provide('theme', 'dark')
任意层子组件：
const theme = inject('theme')
特点：
适合全局数据：
Pinia 是 Vue3 官方主推状态库。
适合简单的事件广播场景：
import mitt from 'mitt'
export const bus = mitt()
组件 A：
bus.emit('hello', 123)
组件 B：
bus.on('hello', val => {})
✔ 高分补充：
provide/inject 更像“依赖注入”，在 UI 组件库中用得非常多（Element Plus、Ant Design Vue）。
标准回答：
v-model 本质是 props（modelValue） + emit（update:modelValue）
就是：
父给子：modelValue
子返父：update:modelValue
答：
expose 用来暴露方法给父组件调用
和 props/emit 不一样：
例如表单组件：
defineExpose({
validate,
reset
})
默认 不是响应式（非常多人不知道！）
必须这样传：
const theme = ref('dark')
provide('theme', theme)
inject 处能响应变化。
面试官会觉得你非常专业。
Vue3 父子通信分：props、emit、v-model、expose，跨层级用 provide/inject，全局用 Pinia，少量事件可用 EventBus。
最近在项目中遇到了页面加载速度优化的问题，为了提高秒开率等指标，我决定从eebi报表入手，分析一下当前项目的性能监控体系。
通过查看报表中的cost_time、is_first等字段，我开始了解项目的性能数据采集情况。为了更好地理解这些数据的含义，我深入研究了相关SDK的源码实现。
在分析过程中，我发现采集到的cost_time参数实际上就是FMP（First Meaningful Paint） 指标。于是我对FMP的算法实现进行了梳理，了解了它的计算逻辑。
本文将分享我在性能优化过程中的一些思考和发现，希望能对关注前端性能优化的同学有所帮助。
FMP (First Meaningful Paint) 首次有意义绘制，是指页面首次绘制有意义内容的时间点。与 FCP (First Contentful Paint) 不同，FMP 更关注的是对用户有实际价值的内容，而不是任何内容的首次绘制。
FMP 的核心思想是：通过分析视口内重要 DOM 元素的渲染时间，找到对用户最有意义的内容完成渲染的时间点。
传统算法流程
新算法（指定元素算法）流程
核心思想： 直接指定一个关键 DOM 元素，计算该元素的完整加载时间作为FMP。
传统算法详细步骤
第一步：DOM元素选择
// 递归遍历 DOM 树，选择重要元素
selectMostImportantDOMs(dom: HTMLElement = document.body): void {
const score = this.getWeightScore(dom);
if (score > BODY_WEIGHT) {
// 权重大于 body 权重，作为参考元素
this.referDoms.push(dom);
} else if (score >= this.highestWeightScore) {
// 权重大于等于最高分数，作为重要元素
this.importantDOMs.push(dom);
}
// 递归处理子元素
for (let i = 0, l = dom.children.length; i < l; i++) {
this.selectMostImportantDOMs(dom.children[i] as HTMLElement);
}
}
第二步：权重计算
// 计算元素权重分数
getWeightScore(dom: Element) {
// 获取元素在视口中的位置和大小
const viewPortPos = dom.getBoundingClientRect();
const screenHeight = this.getScreenHeight();
// 计算元素在首屏中的可见面积
const fpWidth = Math.min(viewPortPos.right, SCREEN_WIDTH) - Math.max(0, viewPortPos.left);
const fpHeight = Math.min(viewPortPos.bottom, screenHeight) - Math.max(0, viewPortPos.top);
// 权重 = 可见面积 × 元素类型权重
return fpWidth * fpHeight * getDomWeight(dom);
}
权重计算公式：
权重分数 = 可见面积 × 元素类型权重
元素类型权重：
第三步：加载时间计算
getLoadingTime(dom: HTMLElement, resourceLoadingMap: Record<string, any>): number {
// 获取 DOM 标记时间
const baseTime = getMarkValueByDom(dom);
// 获取资源加载时间
let resourceTime = 0;
if (RESOURCE_TAG_SET.indexOf(tagType) >= 0) {
// 处理图片、视频等资源
const resourceTiming = resourceLoadingMap[resourceName];
resourceTime = resourceTiming ? resourceTiming.responseEnd : 0;
}
// 返回较大值（DOM 时间 vs 资源时间）
return Math.max(resourceTime, baseTime);
}
第四步：FMP值计算
calcValue(resourceLoadingMap: Record<string, any>, isSubPage: boolean = false): void {
// 构建参考元素列表（至少 3 个元素）
const referDoms = this.referDoms.length >= 3
? this.referDoms
: [...this.referDoms, ...this.importantDOMs.slice(this.referDoms.length - 3)];
// 计算每个元素的加载时间
const timings = referDoms.map(dom => this.getLoadingTime(dom, resourceLoadingMap));
// 排序时间数组
const sortedTimings = timings.sort((t1, t2) => t1 - t2);
// 计算最终值
const info = getMetricNumber(sortedTimings);
this.value = info.value; // 最后一个元素的时间（最晚完成）
this.p80Value = info.p80Value; // P80 百分位时间
}
新算法详细步骤
第一步：配置指定元素
// 通过全局配置指定 FMP 目标元素
const { fmpSelector = "" } = SingleGlobal?.getOptions?.();
配置示例：
// 初始化时配置
init({
fmpSelector: '.main-content', // 指定主要内容区域
// 或者
fmpSelector: '#hero-section', // 指定首屏区域
// 或者
fmpSelector: '.product-list' // 指定产品列表
});
第二步：查找指定元素
if (fmpSelector) {
// 使用 querySelector 查找指定的 DOM 元素
const $specifiedEl = document.querySelector(fmpSelector);
if ($specifiedEl && $specifiedEl instanceof HTMLElement) {
// 找到指定元素，进行后续计算
this.specifiedDom = $specifiedEl;
}
}
查找逻辑：
第三步：计算指定元素的加载时间
// 计算指定元素的完整加载时间
this.specifiedValue = this.getLoadingTime(
$specifiedEl,
resourceLoadingMap
);
加载时间计算包含：
// 获取 DOM 元素的基础标记时间
const baseTime = getMarkValueByDom(dom);
let resourceTime = 0;
// 处理直接资源（img, video, embed 等）
const tagType = dom.tagName.toUpperCase();
if (RESOURCE_TAG_SET.indexOf(tagType) >= 0) {
const resourceName = normalizeResourceName((dom as any).src);
const resourceTiming = resourceLoadingMap[resourceName];
resourceTime = resourceTiming ? resourceTiming.responseEnd : 0;
}
// 处理背景图片
const bgImgUrl = getDomBgImg(dom);
if (isImageUrl(bgImgUrl)) {
const resourceName = normalizeResourceName(bgImgUrl);
const resourceTiming = resourceLoadingMap[resourceName];
resourceTime = resourceTiming ? resourceTiming.responseEnd : 0;
}
// 返回 DOM 时间和资源时间的较大值
return Math.max(resourceTime, baseTime);
第四步：FMP值确定
// 根据是否有指定值来决定使用哪个 FMP 值
if (specifiedValue === 0) {
// 如果没有指定值，回退到传统算法
fmp = isSubPage ? value - diffTime : value;
} else {
// 如果有指定值，使用指定值
fmp = isSubPage ? specifiedValue - diffTime : specifiedValue;
}
决策逻辑：
第五步：子页面时间调整
// 子页面的 FMP 值需要减去时间偏移
if (isSubPage) {
fmp = specifiedValue - diffTime;
// diffTime = startSubTime - initTime
}
新算法的优势
精确性更高
可控性强
计算简单
业务导向
P80 百分位计算
export function getMetricNumber(sortedTimings: number[]) {
const value = sortedTimings[sortedTimings.length - 1]; // 最后一个（最晚）
const p80Value = sortedTimings[Math.floor((sortedTimings.length - 1) * 0.8)]; // P80
return { value, p80Value };
}
元素类型权重
const IMPORTANT_ELEMENT_WEIGHT_MAP = {
SVG: IElementWeight.High, // 高权重
IMG: IElementWeight.High, // 高权重
CANVAS: IElementWeight.High, // 高权重
OBJECT: IElementWeight.Highest, // 最高权重
EMBED: IElementWeight.Highest, // 最高权重
VIDEO: IElementWeight.Highest // 最高权重
};
// MutationObserver 监听 DOM 变化
private observer = new MutationObserver((mutations = []) => {
const now = Date.now();
this.handleChange(mutations, now);
});
// 为每个 DOM 变化创建性能标记
mark(count); // 创建 performance.mark(`mutation_pc_${count}`)
// 为 DOM 元素设置标记
setDataAttr(elem, TAG_KEY, `${mutationCount}`);
// 根据 DOM 元素获取标记时间
getMarkValueByDom(dom: HTMLElement) {
const markValue = getDataAttr(dom, TAG_KEY);
return getMarkValue(parseInt(markValue));
}
图片资源: 标签的 src属性
视频资源: 标签的 src属性
背景图片: CSS background-image属性
嵌入资源: , 标签
// 从 Performance API 获取资源加载时间
const resourceTiming = resourceLoadingMap[resourceName];
const resourceTime = resourceTiming ? resourceTiming.responseEnd : 0;
// DOM 时间和资源时间的较大值
return Math.max(resourceTime, baseTime);
// 子页面从调用 send 方法开始计时
const diffTime = this.startSubTime - this.initTime;
// 子页面只统计开始时间之后的资源
if (!isSubPage || resource.startTime > diffTime) {
resourceLoadingMap[resourceName] = resource;
}
// 子页面的 FMP 值需要减去时间偏移
fmp = isSubPage ? value - diffTime : value;
FMP 最大的优势在于它真正关注用户的实际体验：
FMP 采用了更加全面的计算方式：
FMP 在测量精度方面表现突出：
FMP 在性能监控中发挥着重要作用：
FMP 为产品团队提供了用户视角的性能评估：
FMP 数据为性能优化提供了明确的方向：
通过这次深入分析，我对 FMP 有了更全面的认识。FMP 通过科学的算法设计，能够准确反映用户感知的页面加载性能，是前端性能监控的重要指标。
它不仅帮助我们更好地理解页面加载过程，更重要的是为性能优化提供了科学的依据。在实际项目中，合理运用 FMP 指标，能够有效提升用户体验，实现真正的"秒开"效果。
希望这篇文章能对正在关注前端性能优化的同学有所帮助，也欢迎大家分享自己的实践经验。
1. Dragonboat统一存储LogDB实现分析｜得物技术
2. 从数字到版面：得物数据产品里数字格式化的那些事
3. 一文解析得物自建 Redis 最新技术演进
4. Golang HTTP请求超时与重试：构建高可靠网络请求｜得物技术
5. RN与hawk碰撞的火花之C++异常捕获｜得物技术
关注得物技术，每周更新技术干货
要是觉得文章对你有帮助的话，欢迎评论转发点赞～
未经得物技术许可严禁转载，否则依法追究法律责任。
在大型前端项目或多应用协作场景中，“模块共享” 是绕不开的需求 —— 比如多个应用复用同一套按钮组件、工具函数，或不同团队协作开发时共享基础模块。但在模块联邦（Module Federation）出现前，传统方案始终存在难以解决的痛点：
将公共组件打包成 npm 包是最常见的方式，但流程繁琐：修改组件后需重新发布版本，所有依赖该包的应用都要手动更新依赖、重新构建部署。对于频繁迭代的内部组件库，这种 “发布 - 安装 - 重构” 的循环严重拖慢开发效率，且容易出现 “版本不一致导致的兼容问题”。
为了跳过 npm 发布流程，部分团队会将组件打包成 umd 格式丢到 CDN，消费方通过
早期微前端方案（如 qiankun）更侧重 “应用级嵌入”—— 将多个独立应用整合成一个整体，但跨应用共享组件 / 模块时需额外适配（如通过自定义事件传递状态），集成成本高，且共享粒度仅停留在 “整个应用”，无法实现细粒度的组件 / 工具函数共享。
这些痛点的核心矛盾的是：传统方案无法在 “高效迭代”“按需加载”“依赖自动管理” 之间找到平衡，而模块联邦的出现，正是为了解决这一核心矛盾。
模块联邦（Module Federation，简称 MF）是 Webpack 5 推出的核心特性，其核心目标是：打破应用边界，让多个独立构建的前端应用，像使用本地模块一样按需共享组件、工具函数，且无需手动处理依赖和部署流程。
简单来说，它就像一个 “前端模块的共享枢纽”—— 每个应用都可以作为 “模块提供者”（暴露自身模块）或 “模块消费者”（加载其他应用的模块），甚至两者兼具，形成灵活的模块共享生态。
很多人第一次接触模块联邦时，会有这样的直观认知：“是不是把共享组件放到 CDN 上，消费方通过 Webpack 识别 import 语句，再请求 CDN 资源并注入使用？”—— 这个理解方向完全正确，我们可以基于这个认知，拆解其底层原理：
模块联邦本质是：将共享模块（带依赖元信息）部署到远程服务器（如 CDN），Webpack 通过 “编译时标记 + 运行时加载”，让消费方用原生 import 语法加载远程模块；当代码执行到该 import 时，自动请求远程资源，经格式适配和依赖处理后，注入宿主应用的模块系统，实现 “本地使用” 的体验。
模块提供者（称为 Remote 应用）打包时，Webpack 会做两件关键事：
这里的关键是：共享的不是 “裸模块”，而是 “带依赖元信息的模块单元” ，避免了传统 CDN 引入时 “依赖手动管理” 的问题。
模块消费者（称为 Host 应用）配置 Webpack 时，会声明要加载的远程应用（如 app2: 'app2@cdn.example.com/remoteEntry…'）。Webpack 编译时会识别这类远程模块的 import 语句（如 import 'app2/Button'），并做 “标记”—— 告诉运行时：“这个模块不是本地的，需要从远程加载”。
这一步就像你理解的 “Webpack 的 switch 功能”：编译时给远程模块打标签，运行时遇到标签就切换到 “远程加载逻辑”，而非本地模块的 “文件读取逻辑”。
当宿主应用运行到远程模块的 import 语句时，会触发以下流程：
目标模块加载完成后，Webpack 会做最后两件事：
| 对比维度 | 简单 CDN 引入（umd 包） | 模块联邦 |
|---|---|---|
| 依赖管理 | 手动引入，易冲突 | 自动识别依赖，共享复用 |
| 加载方式 | 插入 | 异步请求 Webpack 格式 chunk，无全局污染 |
| 按需加载 | 不支持，同步加载 | 支持，用到才加载 |
| 版本控制 | 需手动管理版本号 / 缓存 | 通过 shared 配置控制版本兼容 |
| 使用体验 | 需从 window 取模块，体验割裂 | 原生 import 语法，和本地模块一致 |
下面用两个应用演示核心用法：app1（宿主应用，加载远程模块）和 app2（远程应用，暴露共享组件）。
const { ModuleFederationPlugin } = require('webpack').container;
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devServer: { port: 3002 }, // 远程应用运行端口
output: {
uniqueName: 'app2', // 远程应用唯一标识（避免冲突）
},
plugins: [
new ModuleFederationPlugin({
name: 'app2', // 远程应用名称（宿主需通过该名称引用）
filename: 'remoteEntry.js', // 模块导航文件（必须叫这个名字）
exposes: {
// 暴露的模块：key 是宿主引用的路径，value 是本地模块路径
'./Button': './src/Button', // 暴露 Button 组件
'./utils': './src/utils', // 暴露工具函数
},
// 共享依赖：避免 React/ReactDOM 重复打包
shared: {
react: { singleton: true, eager: true }, // singleton：单例模式；eager：优先加载
'react-dom': { singleton: true, eager: true },
},
}),
new HtmlWebpackPlugin({ template: './public/index.html' }),
],
};
创建 src/Button.jsx（共享组件）：
export default function App2Button() {
return <button style={{ color: 'red', fontSize: '20px' }}>我是 app2 的共享按钮</button>;
}
运行 npm run dev，远程应用会启动在 http://localhost:3002，此时可通过 http://localhost:3002/remoteEntry.js 访问导航文件。
const { ModuleFederationPlugin } = require('webpack').container;
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devServer: { port: 3001 }, // 宿主应用运行端口
plugins: [
new ModuleFederationPlugin({
name: 'app1', // 宿主应用名称（仅用于标识）
// 配置要加载的远程应用：key 是远程应用名称，value 是 "远程名称@导航文件地址"
remotes: {
app2: 'app2@http://localhost:3002/remoteEntry.js',
},
// 共享依赖：和远程应用保持一致，避免重复打包
shared: {
react: { singleton: true, eager: true },
'react-dom': { singleton: true, eager: true },
},
}),
new HtmlWebpackPlugin({ template: './public/index.html' }),
],
};
创建 src/App.jsx，用原生 import 语法加载远程模块：
import React, { lazy, Suspense } from 'react';
// 按需加载远程模块（推荐）：用 lazy + Suspense 处理加载状态
const App2Button = lazy(() => import('app2/Button')); // 格式：远程应用名称/暴露的模块 key
const App2Utils = lazy(() => import('app2/utils'));
function App() {
return (
<div style={{ padding: '20px' }}>
<h1>我是宿主应用（app1）</h1>
{/* 远程模块加载时显示 fallback */}
<Suspense fallback="加载中...">
<App2Button />
</Suspense>
</div>
);
}
export default App;
运行 npm run dev，访问 http://localhost:3001，即可看到来自 app2 的红色按钮 —— 此时，宿主应用已成功加载并使用远程模块，且完全感知不到 “这是远程资源”。
模块联邦的核心价值，是让前端模块共享从 “繁琐的手动管理” 走向 “自动化、按需化、低耦合”。它没有改变开发者的使用习惯（仍用 import 语法），却解决了传统方案的核心痛点，让大型前端项目的拆分与协作变得更高效。
如果你正在面临 “多应用共享组件”“大型项目拆分” 等问题，模块联邦无疑是当前最理想的解决方案 —— 它不仅是一种技术，更是一种 “前端架构的设计思想”：打破边界，让模块自由流动。
# JS 中“复写函数”的 10 种姿势（附完整可运行 Demo）
在前端工程里，“复写一个函数”（Hook / Patch / Override）是非常常见的需求，尤其是在：
- 调试黑盒 SDK
- 做监控埋点
- 改第三方库行为但又不能直接改源码
本文把常见的 10 种手法整理成一个“武器清单”，**每种都给出可直接跑的 Demo**，方便你复制到控制台 / Node 里试。
---
## 🟦 一、直接覆写：最简单粗暴
**思路**：如果函数本来就是某个对象上的方法，直接重新赋值即可。
### 示例场景
已有一个业务对象：
```js
const userService = {
getUserName(id) {
console.log('[orig] getUserName', id);
return 'Alice';
}
};
// 原始调用
console.log('--- 原始调用 ---');
console.log(userService.getUserName(1));
现在想完全替换掉 getUserName 的实现：
// 直接覆写
userService.getUserName = function (id) {
console.log('[new] getUserName', id);
return 'Bob';
};
console.log('--- 覆写后 ---');
console.log(userService.getUserName(1));
特点：
思路：保存原函数引用 → 用同名函数包装一层。
// 模拟一个 SDK
const sdk = {
track(eventName, payload) {
console.log('[orig track]', eventName, payload);
return { ok: true };
}
};
// 原始使用
console.log('--- 原始调用 ---');
sdk.track('page_view', { path: '/home' });
// 开始 Monkey Patch
const origTrack = sdk.track;
sdk.track = function (...args) {
console.log('[before track]', ...args);
const result = origTrack.apply(this, args);
console.log('[after track]', result);
return result;
};
console.log('--- Patch 之后 ---');
sdk.track('page_view', { path: '/detail' });
适用：
思路：用 Proxy 代理整个对象，在 get 里统一拦截函数调用。
// 一个“黑盒”对象，方法名可能会变
const api = {
login(user, pwd) {
console.log('login...', user);
return { token: 'xxx' };
},
logout() {
console.log('logout...');
}
};
// 用 Proxy 包一层
const apiWithLog = new Proxy(api, {
get(target, prop, receiver) {
const value = Reflect.get(target, prop, receiver);
if (typeof value === 'function') {
return function (...args) {
console.log(`[Proxy] call ${String(prop)} with`, args);
const result = value.apply(this, args);
console.log(`[Proxy] ${String(prop)} result`, result);
return result;
};
}
return value;
}
});
// 使用方式跟原来一样
console.log('--- 使用 Proxy 后 ---');
apiWithLog.login('alice', '123456');
apiWithLog.logout();
适用：
Object.defineProperty：强行改 getter / setter / 不可枚举属性思路：当属性不可写、或是 getter / setter，需要用 defineProperty 操作描述符。
const obj = {};
// 初始定义：只读属性
Object.defineProperty(obj, 'foo', {
value: 'readonly',
writable: false,
configurable: true,
enumerable: true
});
console.log('原始 foo =', obj.foo);
// 直接赋值会失败（严格模式下报错，非严格模式下无效）
obj.foo = 'new';
console.log('直接赋值后 foo =', obj.foo); // 还是 readonly
// 用 defineProperty 强行改成函数
Object.defineProperty(obj, 'foo', {
configurable: true,
writable: true,
value: function () {
console.log('I am new foo()');
}
});
console.log('--- 改成函数之后 ---');
obj.foo();
const service = {};
Object.defineProperty(service, 'expensiveApi', {
configurable: true,
get() {
console.log('[getter] 初始化 expensiveApi');
// 真正创建对象
const realApi = {
call() {
console.log('real api called');
}
};
// 用普通属性替换掉 getter（只初始化一次）
Object.defineProperty(service, 'expensiveApi', {
value: realApi,
writable: false,
configurable: false
});
return realApi;
}
});
// 第一次访问会触发 getter
console.log('--- 第一次访问 ---');
service.expensiveApi.call();
// 第二次访问直接用缓存
console.log('--- 第二次访问 ---');
service.expensiveApi.call();
fetch（浏览器）// 保存原始 fetch
const origFetch = window.fetch;
// 覆写
window.fetch = async (...args) => {
console.log('[Hook fetch] 请求参数:', args);
const res = await origFetch(...args);
// 复制一份 Response 查看内容（注意：这里只是示意，实际需考虑流只能读一次）
const clone = res.clone();
clone.text().then(text => {
console.log('[Hook fetch] 响应文本截断:', text.slice(0, 100));
});
return res;
};
// 使用：之后所有 fetch 都会经过 Hook
// fetch('https://jsonplaceholder.typicode.com/todos/1');
const origAdd = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function (type, listener, options) {
console.log('[Hook addEventListener]', type, 'on', this);
// 也可以在这里包一层 listener，实现事件埋点
return origAdd.call(this, type, listener, options);
};
// Demo：添加一个 click 事件
document.body.addEventListener('click', () => {
console.log('body clicked');
});
还能 Hook：
XMLHttpRequest.prototype.sendWebSocket.prototype.sendhistory.pushState / replaceState（前端路由监控）console.log（调试场景）require Hook / 构建期 aliasrequire（CommonJS）// hook-require.js
const Module = require('module');
const originalRequire = Module.prototype.require;
Module.prototype.require = function (path) {
console.log('[require]', path);
const exports = originalRequire.apply(this, arguments);
// 针对指定模块做 Monkey Patch
if (path === './sdk') {
const origDo = exports.doSomething;
exports.doSomething = function (...args) {
console.log('[patched sdk.doSomething]', args);
return origDo.apply(this, args);
};
}
return exports;
};
// 主入口
require('./hook-require');
const sdk = require('./sdk');
sdk.doSomething('hello');
// sdk.js
exports.doSomething = function (msg) {
console.log('[orig sdk.doSomething]', msg);
};
运行 node main.js 即可看到 require 日志 + patch 效果。
以 Vite 为例（Webpack 思路类似）。
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
resolve: {
alias: {
'some-sdk': '/src/sdk-wrapped.js' // 用你自己的 wrapper 替换原 SDK
}
}
});
// src/sdk-wrapped.js
import * as realSdk from 'some-sdk-original'; // 假设这是原 SDK 包名
const sdk = { ...realSdk };
const origInit = sdk.init;
sdk.init = function (...args) {
console.log('[wrapped sdk.init]', args);
return origInit.apply(this, args);
};
export default sdk;
export * from 'some-sdk-original'; // 其余原样导出
业务代码：
// import sdk from 'some-sdk'; // 实际拿到的是 sdk-wrapped.js
// sdk.init(...);
class 继承：在可控框架里“正统扩展”思路：当你能控制实例创建时，直接用 extends 继承原类，覆写方法并按需 super.foo()。
class Button {
click() {
console.log('[Button] clicked');
}
}
// 原始使用
const btn = new Button();
btn.click();
// 新类：在原 click 前后加逻辑
class LogButton extends Button {
click() {
console.log('[LogButton] before click');
const result = super.click();
console.log('[LogButton] after click');
return result;
}
}
const logBtn = new LogButton();
logBtn.click();
适合：
Proxy + construct：拦截 new 的构造行为思路：用 Proxy 代理“类本身”，在 construct 里拦截所有实例创建。
class Service {
foo() {
console.log('[Service.foo]');
}
}
const PatchedService = new Proxy(Service, {
construct(target, args, newTarget) {
console.log('[Proxy construct] 创建 Service 实例，参数:', args);
// 创建原始实例
const instance = Reflect.construct(target, args, newTarget);
// 给实例打补丁
const origFoo = instance.foo;
instance.foo = function (...fooArgs) {
console.log('[patched foo] before', fooArgs);
const result = origFoo.apply(this, fooArgs);
console.log('[patched foo] after', result);
return result;
};
return instance;
}
});
// 之后统一用 PatchedService，而不是 Service
const s = new PatchedService();
s.foo();
适合：
new 的地方思路：直接改 Class.prototype.xxx 或内置类型原型，例如 Array.prototype.push。
function Person(name) {
this.name = name;
}
Person.prototype.sayHi = function () {
console.log('Hi, I am', this.name);
};
const p1 = new Person('Alice');
p1.sayHi();
// Patch 原型
const origSayHi = Person.prototype.sayHi;
Person.prototype.sayHi = function () {
console.log('[patched] before sayHi');
origSayHi.call(this);
console.log('[patched] after sayHi');
};
const p2 = new Person('Bob');
console.log('--- Patch 之后 ---');
p1.sayHi(); // 旧实例也会受影响
p2.sayHi();
push 打日志（谨慎使用）const origPush = Array.prototype.push;
Array.prototype.push = function (...items) {
console.log('[Array.push patched] this =', this, 'items =', items);
return origPush.apply(this, items);
};
const arr = [1, 2];
arr.push(3); // 会打印日志
注意：改内置原型影响范围非常大，要在可控环境下使用。
<script>：在不能改源码时复写全局函数思路：在浏览器通过脚本注入的方式覆盖某个全局函数（油猴脚本、Chrome 插件常用）。
window.someFn
假设目标页面有：
window.someFn = function () {
console.log('[page] someFn');
};
你在自己的脚本里注入一段：
(function inject() {
const script = document.createElement('script');
script.innerHTML = `
(function () {
const orig = window.someFn;
window.someFn = function (...args) {
console.log('[injected] before someFn', args);
const result = orig && orig.apply(this, args);
console.log('[injected] after someFn', result);
return result;
};
})();
`;
document.documentElement.appendChild(script);
script.remove();
})();
执行后，页面中所有对 someFn 的调用都会走你注入的版本。
适用：
| 方法 | 能力/复杂度 | 典型场景 |
|---|---|---|
| 直接覆写 | 最简单 | 你能直接访问对象和方法名 |
| Monkey Patch | ⭐最常用 | Hook SDK、埋点、调试 |
| Proxy（拦截对象） | ⭐高级黑盒分析 | 不知道具体方法名，想全量 sniff |
defineProperty |
强力 | 只读属性、getter/setter 代理 |
| Hook 全局 API | ⭐非常强 | 网络、事件、路由、日志监控 |
| require Hook / alias | 构建期 | 替换整个 SDK 模块 |
class 继承 |
正统扩展 | 自己可控的类/组件 |
Proxy + construct
|
高级 | 拦截所有实例的创建过程 |
| 原型 Hook | 全局影响 | 对所有实例生效（谨慎） |
| script 注入 | 浏览器插件/油猴场景 | 不能改源码、只能运行时注入 |
--
做 Uni-App 跨端开发时，鸿蒙应用上架遇到了一个棘手问题：应用集成了微信登录、支付、分享等核心功能，但上架平台的测试机未安装微信，导致这些功能触发时直接崩溃，最终上架失败。
翻遍了 Uni-App 官方文档、鸿蒙开发者社区，甚至各类技术论坛，都没找到现成的「鸿蒙平台检测微信是否安装」的解决方案 —— 毕竟 Uni-App 对鸿蒙的适配还在持续完善中，很多原生能力的跨端封装还未覆盖到。
无奈之下，只能自己摸索鸿蒙原生能力与 Uni-App 的桥接方式，最终实现了一个轻量的检测插件，完美解决了上架问题。今天把这个过程分享出来，希望能帮到有同样需求的开发者～
Uni-App 调用鸿蒙原生能力，本质是通过「Uni-App 插件 + 鸿蒙原生代码」的方式实现桥接：
com.tencent.mm）首先通过 HBuilder X 在 Uni-App 项目中右键 uni_modules，新建 UTS插件-API插件，标准结构如下：
/**
* 内部结果类型（避免对象字面量作为类型）
*/
export interface CheckResult {
isInstalled: boolean;
errMsg: string;
}
/**
* 检查微信安装状态的入参配置
*/
export interface CheckWeChatInstalledOptions {
/** 检查成功回调（仅当已安装时触发） */
success?: (result: CheckWeChatInstalledSuccess) => void;
/** 检查失败回调（未安装或检查出错时触发） */
fail?: (result: CheckWeChatInstalledFail) => void;
/** 检查完成回调（无论成败） */
complete?: (result: CheckWeChatInstalledComplete) => void;
}
/**
* 成功回调结果类型
*/
export interface CheckWeChatInstalledSuccess {
isInstalled: true;
errMsg: "ok"; // 严格字面量类型，避免 string 不匹配
}
/**
* 失败回调结果类型
*/
export interface CheckWeChatInstalledFail {
isInstalled: false;
errMsg: string; // 错误信息描述
}
/**
* 完成回调结果类型
*/
export interface CheckWeChatInstalledComplete {
isInstalled: boolean;
errMsg: string;
}
import {
CheckWeChatInstalledOptions,
CheckWeChatInstalledSuccess,
CheckWeChatInstalledFail,
CheckWeChatInstalledComplete,
CheckResult
} from '../interface.uts'
// 重新导出类型，供外部使用
export type {
CheckWeChatInstalledOptions,
CheckWeChatInstalledSuccess,
CheckWeChatInstalledFail,
CheckWeChatInstalledComplete,
CheckResult
}
import { bundleManager } from '@kit.AbilityKit';
import hilog from '@ohos.hilog';
import { BusinessError } from '@kit.BasicServicesKit';
/**
* 常量定义（使用大写+下划线命名规范）
*/
export const WECHAT_BUNDLE_NAME = 'com.tencent.mm'; // 微信官方包名（Android/鸿蒙通用）
const LOG_TAG = 'HL_APPCHECK'; // 日志标签常量
const LOG_DOMAIN = 0x0000; // 日志域常量
/**
* 检查设备是否安装微信（优化版）
* @param options 配置参数（包含成功、失败、完成回调）
* @returns Promise<CheckResult> 异步返回检查结果（支持 Promise 链式调用）
*/
export async function checkWeChatInstalled(
options : CheckWeChatInstalledOptions = {} // 给参数设置默认值，避免 undefined 报错
) : Promise<CheckResult> {
// 初始化默认结果
let result : CheckResult = {
isInstalled: false,
errMsg: '检查中...'
};
try {
// 检查微信是否安装
const isInstalled = await isAppInstalled(WECHAT_BUNDLE_NAME);
if (isInstalled) {
// 微信已安装 - 构造成功结果
result = {
isInstalled: true,
errMsg: 'ok'
};
// 调用成功回调（类型安全转换）
options.success?.(result as CheckWeChatInstalledSuccess);
hilog.info(LOG_DOMAIN, LOG_TAG, '微信已安装');
} else {
// 微信未安装 - 构造失败结果
result = {
isInstalled: false,
errMsg: '微信未安装'
};
// 调用失败回调（类型安全转换）
options.fail?.(result as CheckWeChatInstalledFail);
hilog.info(LOG_DOMAIN, LOG_TAG, '微信未安装');
}
} catch (err) {
// 异常处理
const error = err as BusinessError | Error;
const errorCode = 'code' in error ? error.code : 'unknown';
const errorMsg = error.message || `检查失败（错误码：${errorCode}）`;
// 构造错误结果
result = {
isInstalled: false,
errMsg: errorMsg
};
// 调用失败回调
options.fail?.(result as CheckWeChatInstalledFail);
// 错误日志增强
hilog.error(LOG_DOMAIN, LOG_TAG, `检查微信安装状态失败：${errorMsg}，错误码：${errorCode}`);
} finally {
// 调用完成回调
options.complete?.(result as CheckWeChatInstalledComplete);
hilog.info(LOG_DOMAIN, LOG_TAG, `检查微信安装状态完成：${JSON.stringify(result)}`);
}
// 返回 Promise 结果，支持 async/await 调用
return result;
}
/**
* 检查指定包名的应用是否已安装）
* @param bundleName 应用包名
* @returns Promise<boolean> 是否已安装
*/
async function isAppInstalled(bundleName : string) : Promise<boolean> {
try {
// 获取应用信息
await bundleManager.getBundleInfo(
bundleName,
bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT
);
return true;
} catch (err) {
return false;
}
}
在需要使用微信功能的页面（如登录页、支付页），先调用检测方法：
import { checkWeChatInstalled } from "@/uni_modules/hl-appcheckplugin"
checkApp() {
// 统一返回 Promise，确保所有端行为一致
return new Promise((resolve) => {
// #ifdef APP-PLUS
const isExist = plus.runtime.isApplicationExist({
pname: 'com.tencent.mm',
action: 'weixin://'
});
resolve(isExist);
// #endif
// #ifdef APP-HARMONY
checkWeChatInstalled({
success: () => {
console.log('微信已安装');
resolve(true);
},
fail: (err) => {
console.log('微信未安装或检测失败', err);
resolve(false);
}
});
// #endif
// #ifdef MP-WEIXIN
resolve(true);
// #endif
});
},
公司 React 应用表现很差。重复渲染感觉像迷一样，不知道大家有不没有过这样的经历：
这些问题也侧面反映，要求 React 使用者需要更多的心智以及对框架原理更多了解，才能做好 React 开发。
但这也是一个很好的话题，当面试官问你性能优化的时候，关于 React 框架层面的优化，可以参考这篇文章，如何解决公司的 React 应用重复渲染问题！
首先我们需要找到为什么性能出现问题的原因
第一步开始用数据查看到底哪里出了问题。React DevTools 里的 Profiler 很好用，它可以记录你在应用中的交互，告诉你哪些组件重渲染了、为什么重渲染、用了多长时间。
装好 React DevTools 后，打开 “Profiler” 标签。开始录制，做一些感觉卡顿的操作，然后停止录制。
生成的“火焰图”能很直观的告诉我们发生了什么。我能看到一些组件在 props 看起来没变的情况下也在重渲染。这就成了我优化的切入点。
定位到问题区域后，我开始逐个尝试修复。有些方法很简单，但效果很明显。
一个很常见的问题是：父组件重渲染时，子组件也跟着重渲染，哪怕它自己的 props 并没有变化。
之前：
function UserProfile({ name }) {
console.log('Rendering UserProfile');
return <div>{name}</div>;
}
之后：
import { memo } from 'react';
const UserProfile = memo(function
UserProfile({ name }) {
console.log('Rendering UserProfile');
return <div>{name}</div>;
});
把组件用 React.memo 包起来后，它只会在 name 这个 prop 变化时重渲染，而不是每次父组件渲染都跟着来一遍。
在复杂场景最好放弃用 useCallback，写依赖是一个很麻烦的事情，强烈建议使用 ahooks 库导出的 useMemoizedFn 函数。为什么呢？
举例：
useCallback
// useCallback：依赖变化会导致函数引用变化
const [state, setState] = useState('');
// 当 state 变化, func 函数的引用才变化
const func = useCallback(() => {
console.log(state);
}, [state]);
useMemoizedFn
// useMemoizedFn：始终稳定的函数引用，内部总能拿到最新状态，不用写第二个依赖参数
const func = useMemoizedFn(() => {
console.log(state);
});
和函数类似，如果你在渲染过程中创建对象或数组，也会带来问题。
之前：
function StyleComponent({ isHighlighted }) {
const style = {
backgroundColor: isHighlighted ?
'yellow' : 'white',
padding: 10
};
return <div style={style}>Some content</
div>;
}
之后：
import { useMemo } from 'react';
function StyleComponent({ isHighlighted }) {
const style = useMemo(() => ({
backgroundColor: isHighlighted ?
'yellow' : 'white',
padding: 10
}), [isHighlighted]);
return <div style={style}>Some content</
div>;
}
用 useMemo 后， style 这个对象只会在 isHighlighted 变化时才被重新创建，避免了不必要的重渲染。
