本文详细讲解了如何用JavaScript实现歌词同步滚动效果。核心包括两个关键技术点：1) 解析LRC歌词文件，通过正则表达式将时间戳和歌词文本转换为结构化数据；2) 实现歌词居中滚动算法，通过计算高亮行与容器的相对位置，使用transform实现平滑滚动。文章从原理出发，分步骤解析了歌词解析函数、HTML/CSS结构准备以及精确计算滚动距离的数学公式，最终实现音频播放与歌词视图的完美同步。

理解 Vue 的生命周期，就像是拿到了一张 Vue 应用运行的“地图”。在正确的时间执行正确的操作。高效地进行数据请求和DOM 操作。优雅地进行资源管理，避免内存泄漏。希望这篇博客能帮助你更好地掌握 Vue 的核心，写出更出色、更健壮的应用程序！

插槽类型父组件提供子组件提供核心作用普通插槽HTML 结构 + 数据无解决结构自定义作用域插槽HTML 结构 + 逻辑数据解决结构自定义，且内容数据由子组件提供希望通过这个“厨师与顾客”的比喻，你已经彻底掌握了这个让无数人头疼的作用域插槽！现在，去实战中应用吧，用它来构建更灵活、更强大的组件！

随着前端技术的迭代，Vue 3 已经成为了目前的主流选择。官方推出的新脚手架create-vue底层切换到了 Vite，为我们带来了毫秒级的开发响应速度。但除了快，Vue 3 最大的颠覆性改变在于它引入了组合式 API (Composition API)。很多从 Vue 2 迁移过来的开发者可能会问：“原来的 Options API 写得好好的，为什么要换？本文将通过代码对比和核心语法解析，告诉你

核心坑点AI高频错误操作正确规范核心避坑原则上下文噪音干扰给AI开放式模糊指令，如“修复整个项目的bug”，不限制范围给封闭式精准指令，如“仅修改stores/plugin.ts文件，基于PluginItem接口重写add/delete方法”不给AI猜的空间，明确边界、锁定范围、固定基准响应式丢失直接解构Pinia/reactive响应式数据，导致引用断开必须使用storeToRefs处理Pini

LLM 提供基础智能Token 决定信息处理方式Context 决定模型能看到什么Prompt 决定模型如何行动Function Calling 让模型结构化表达工具调用Tool 让模型获得外部能力MCP 让工具接入标准化Agent 让系统具备多步执行能力Agent Skill 让经验和流程可以复用从这个角度看，AI 应用开发的核心，已经不只是“选哪个模型”，而是如何组织上下文、设计工具、定义协议

Chrome DevTools MCP 是我目前用过的 MCP 里比较实用的，推荐使用Claude Code辅助开发的朋友都可以尝试一下——只要你有一份认真写过的设计稿，它就能帮你把"还原度"这件事自动化掉一大半。设计流程是这样的：产品需求和设计稿定好之后， Gemini 负责具体页面的设计，跑通之后再交给我 review 页面是否有问题。这套流程跑通之后，一个页面从"AI 写完"到"还原度 OK

TDD 管的是"怎么把一件确定的事做对"，SDD 管的是"先把这件事到底是什么想清楚"。对新手来说，不用纠结"该学哪个"，它们解决的是软件开发里两个不同阶段的问题——而在 AI 帮你写代码的今天，"先把事情想清楚"这一步，正在变得比以前更重要。

Chrome DevTools MCP 是我目前用过的 MCP 里比较实用的，推荐使用Claude Code辅助开发的朋友都可以尝试一下——只要你有一份认真写过的设计稿，它就能帮你把"还原度"这件事自动化掉一大半。设计流程是这样的：产品需求和设计稿定好之后， Gemini 负责具体页面的设计，跑通之后再交给我 review 页面是否有问题。这套流程跑通之后，一个页面从"AI 写完"到"还原度 OK

LLM 提供基础智能Token 决定信息处理方式Context 决定模型能看到什么Prompt 决定模型如何行动Function Calling 让模型结构化表达工具调用Tool 让模型获得外部能力MCP 让工具接入标准化Agent 让系统具备多步执行能力Agent Skill 让经验和流程可以复用从这个角度看，AI 应用开发的核心，已经不只是“选哪个模型”，而是如何组织上下文、设计工具、定义协议