Vue埋点与性能采集需分层设计、低侵入、统一上报：路由守卫自动记录PV与停留时长，useTrack组合式函数和v-track-click指令封装行为埋点，全局click与IntersectionObserver实现自动曝光捕获，performance API采集页面/资源/接口性能，sendBeacon+节流聚合保障数据可靠上报。
在 Vue 项目中实现埋点与性能数据采集，关键在于分层设计、低侵入性和统一管理。不需要改业务逻辑也能覆盖核心场景，重点是把行为采集和性能监控拆开做，再用统一通道上报。
页面级与组件级行为埋点
优先利用路由守卫和组合式函数，避免手动加代码：
- 在 router.beforeEach / afterEach 中自动记录页面 PV、跳转路径、停留时长（用
performance.now()或时间戳差值） - 用 useTrack 组合式函数封装点击、曝光等逻辑，组件内直接调用
const { trackClick, trackImpression } = useTrack() - 对按钮、链接等元素使用自定义指令（如
v-track-click="{ id: 'submit-btn', page: 'order' }"），绑定事件并自动携带上下文
用户交互行为自动捕获
不依赖开发者主动调用，也能拿到关键操作：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 监听全局
click事件，通过 DOM 路径、data 属性或 class 名匹配规则识别可埋点元素（例如含data-track的按钮） - 结合 IntersectionObserver 实现曝光埋点，当商品卡片、广告位进入视口时触发上报
- 表单提交、输入框失焦、视频播放等事件，可通过指令或 mixin 统一拦截，提取字段名、值长度、是否为空等特征
前端性能数据采集
利用浏览器原生 API，聚焦真实用户体验指标：
立即学习“前端免费学习笔记（深入）”；
-
页面加载性能：在
mounted钩子中读取performance.getEntriesByType('navigation')，提取loadEventEnd、domContentLoadedEventEnd -
资源加载耗时：监听
performance.getEntriesByType('resource')，过滤 JS/CSS/图片，记录慢资源（如加载超 2s 的接口或大图） -
接口性能监控：在请求封装层（如
src/utils/request.js）统一注入计时逻辑，记录 URL、状态码、响应时间、重试次数
数据聚合与可靠上报
减少请求干扰，提升数据完整性：
- 使用 navigator.sendBeacon 上报页面卸载前的数据（如停留时长、未发送的错误）
- 对高频事件（如滚动、鼠标移动）做节流+缓存，按秒聚合后批量发送
- 上报前添加设备信息（UA、屏幕尺寸）、用户标识（Cookie 或 localStorage 中的 UUID）、当前路由、时间戳等基础字段
