被巨款砸中-CSDN博客

原创响应式设计：一套代码，优雅适配 PC 与移动端

在多设备、多屏幕尺寸的今天，如何让我们的网站在PC、平板和手机上都拥有出色的用户体验？响应式设计（Responsive Web Design, RWD）正是解决这一问题的金钥匙。它允许我们，通过灵活的布局和样式，为所有用户提供一致且优质的访问体验。

2025-11-17 10:56:23 872

原创对比 Vue 的ref、unref、isRef、toRef、toRefs、toRaw 区别以及使用场合

API类型用法特点场景ref创建 refref(0)响应式单值，访问需.value基本类型响应式unref取值如果是 ref 则返回.value，否则原样返回解 ref 安全获取值isRef判断判断是否 ref条件判断 reftoRef创建对象属性 ref保持响应式，修改同步暴露对象某个属性为 reftoRefs批量转换将对象所有属性变成 ref，防止解构丢响应性组合式 API 返回响应式对象toRaw获取原始对象toRaw(obj)获取非响应式原始对象传递值不需要响应式或性能优化。

2025-10-24 13:32:07 340

原创 Chrome 开发者工具（DevTools）快速入门——前端必备技能

面板功能简介典型用途Elements查看 / 修改页面结构和样式实时调整 CSS、查看 DOMConsole执行 JS 代码、查看日志打印调试输出、测试代码片段Sources查看 / 设置断点调试JS 调试、逐步执行代码Network监控请求 / 响应分析接口请求、性能、缓存查看本地数据性能分析监控加载速度、渲染时间Lighthouse页面质量报告SEO、性能、可访问性检测Elements 面板可以直接看到网页的 DOM 结构、样式规则和渲染状态，并能实时修改、验证效果。

2025-10-23 16:54:54 2291

原创前端 20 个零依赖浏览器原生 API 实战清单

想在 2025 年写更轻、更快、无依赖的前端代码？这篇博客精挑细选 20 个“开箱即用”的浏览器原生能力——ResizeObserver、IntersectionObserver、Page Visibility、Web Share、Wake Lock，Clipboard、File System Access、Background Fetch、ReadableStream、WritableStream、WebCodecs 等，覆盖布局监听、性能优化、文件读写、音视频编解码、离线传输、多标签通信等高频场景

2025-10-15 21:15:23 1492

原创 Jessibuca 播放器

Jessibuca是一个基于web 端的 HTML5 视频播放器库，专门用来播放实时或点播的 FLV/RTMP/WebRTC 视频流，无需额外插件。纯前端解码：通过 JavaScript + WebAssembly 实现视频解码。跨浏览器支持：Chrome、Firefox、Edge 等现代浏览器均可使用。高性能：支持硬件加速和多路视频播放。开源：可以根据需求修改或封装功能。

2025-10-12 21:59:06 1008

原创 Vue nextTick 全景指南：一篇吃透 $nextTick 用法与底层实现

深入解析 Vue 的 $nextTick：先讲异步批量更新背景，再给出回调与 async/await 两种代码示例，最后拆解 Vue2 四重降级策略（Promise→MutationObserver→setImmediate→setTimeout）与 Vue3 仅用 Promise 的差异，帮你理解为何、何时以及如何在项目中正确访问更新后的 DOM、初始化第三方库或管理焦点。

2025-10-11 22:42:15 1466

原创 Vue3 开发效率倍增指南：自动注册、懒加载、Suspense、Teleport、KeepAlive、VueUse 实战技巧一网打尽

一文汇总 Vue3 最值得掌握的 7 大提效技巧：unplugin-vue-components 自动全局注册组件；基于 IntersectionObserver 的 v-lazy 图片懒加载指令；动态 CSS 变量+Class ；Suspense 协调异步组件与数据加载状态；Teleport 把弹窗/Toast 挂到 body，层级零烦恼；KeepAlive 缓存 Tab 页、列表页，状态不丢失；⑦ VueUse 开箱即用的组合式工具函数。全程可 copy 的代码示例，让你立竿见影提升开发速度与体验。

2025-10-10 12:41:31 1202

原创聊一聊Promise

Promise 是一个对象，它代表了一个未来才会知道结果的事件（通常是一个异步操作）。它相当于一个容器，保存着一个异步操作的最终完成（成功）或失败的状态和结果值。简单来说，所有的异步场景，都可以看做是一个异步任务，每个异步任务，在 JS 中应该表现为一个对象，该对象称之为Promise对象，也叫做任务对象每个任务对象，都应该有两个阶段、三个状态两个阶段：unsettled（未敲定阶段）、settled（已敲定阶段）

2025-10-09 16:56:37 1293

原创一篇文章讲清Prompt、Agent、MCP、Function Calling

最后，把整个流程梳理一下。“我明天考试该怎么复习比较高效？用户提问这个问题会被包装成，交给 AI Agent。Agent 获取工具信息Agent 通过MCP 协议，从MCP Server那里获取所有工具的信息。这些工具信息可能会被 Agent 转换成的形式，也可能转成的 JSON 格式，然后和用户的 User Prompt 一起打包，发送给AI 模型。AI 模型决定用哪个工具AI 模型收到后，发现有一个名叫Web Browse的网页浏览工具。

2025-10-02 00:03:14 1257

原创新手入门MCP，新手如何使用MCP

是一种协议，用于连接大模型（LLM）与外部工具/数据源，让模型可以访问外部数据、执行命令、调用 API，从而大大扩展模型的能力。让模型不仅能生成文本，还能“做事情”MCP 的使用场景：调用外部 API（GitHub、数据库、天气等）访问本地或远程文件系统执行计算或代码生成和大模型结合做智能问答或任务自动化简单来说，MCP 就是 AI 大模型的标准化工具箱。它让大模型可以利用这些工具与外界互动，获取信息并完成具体任务。在我们的日常工作和学习中，我们经常需要与浏览器、文件、数据库、代码仓库。

2025-09-30 17:05:52 1336

原创 SEO 优化你不知道的一些细节?如何优化 seo

HTML 语义化结构化，比如合理使用标题标签与<article>、<nav>、<header> 等标签。重要内容直接写在 HTML 里面，而不是靠 JS 动态加载。精确的 Meat 标签与 <title>标题填写图片 alt 属性与关键词策略站点地图结构化数据移动端适配优化性能优化服务端渲染(SSR) 与静态站点生成(SSG)

2025-09-28 10:04:05 1074

原创 Intersection Observer API 完全指南：从语法到 3 个性能实战

Intersection Observer API 怎么写？root、rootMargin、threshold 三个参数一张图看懂。给出懒加载、无限滚动、虚拟列表 3 个完整 Demo，FPS 提升 3.2 倍，代码直接复制运行。

2025-09-26 09:16:13 1543

原创解决 Google AI Studio(Gemini) 403 问题，您不在支持的区域

解决 Google AI Studio(Gemini) 403 问题，您不在支持的区域，Failed to list models: permission denied.Please try again.

2025-09-25 11:50:03 23593 35

原创浅拷贝与深拷贝的区别？

什么是深拷贝与浅拷贝以及区别？浅拷贝与深拷贝到底差在哪？

2025-09-23 22:05:50 454

原创 Vue 中 8 种组件通信方式

本文系统梳理了 Vue 中 8 种常见的组件通信方式，包括父子通信（props、emit、ref）、跨级通信（provide/inject、attrs/listeners）、兄弟通信（EventBus、$parent）、以及复杂状态管理（Vuex/Pinia）。通过实例代码详解每种方式的适用场景与优缺点，帮助你快速掌握 Vue 组件间数据传递的最佳实践。

2025-09-20 20:49:46 1628 2

原创 Vue2 生命周期钩子详解：beforeCreate、created、mounted、beforeDestroy 用法顺序与坑点指南

想彻底搞懂 Vue2 的 beforeCreate、created、mounted、beforeDestroy 等 8 个生命周期钩子？本文用通俗文字逐阶段拆解数据是否可访问、DOM 能否操作、常见坑点与面试高频问答，帮你快速梳理初始化、异步请求、第三方库挂载与清理逻辑，一篇收藏，开发不迷路。

2025-09-18 22:24:56 1701

原创前端拖拽排序实现

Vue 项目里做拖拽，你还在为“拖拽完数据不同步、DOM 闪回原位”头疼吗？本文用 3 种主流方案（原生 HTML5 Drag API、SortableJS、vue-draggable-plus）带你手写完整 Demo，对比性能、兼容性、内存泄漏风险，并给出“何时选谁”的决策表。附可复制的 Vue3 组合式代码，5 分钟集成到业务。关键词：Vue3 拖拽排序、Sortable、vuedraggable、HTML5 dragover、数据同步、性能优化。

2025-09-17 19:46:57 653

原创 Vue 与 React 的区别？

Vue与React的核心差异

2025-09-15 15:21:51 1009 2

原创彻底搞懂前端跨域：一份涵盖开发到生产的完整解决方案

还在为"CORS policy"报错头疼吗？本文带你从根源“同源策略”彻底搞懂跨域。我们将实战演练三大主流解决方案：后端CORS配置、开发环境Vite代理、生产环境Nginx反向代理。无论你是新手还是希望巩固知识的开发者，这篇完整指南都能帮你轻松解决所有跨域难题。

2025-09-10 12:21:04 1845

原创 Vue 权限控制别再只用自定义指令了！一招“渲染前决策”彻底堵住组件级安全漏洞

很多人用 v-permission 指令做按钮级鉴权很爽，却把它直接套在业务组件上，结果组件的 setup、onMounted、甚至 defineExpose 的方法在无权限时仍然全部执行，造成多余 API 请求与越权调用隐患。本文手把手带你复现这个“渲染后移除”的坑，并给出基于 <Authority>

2025-09-09 21:49:27 585

原创基于 GitHub Actions 的零成本自动化部署：把 Vite/Vue3 项目一键发布到 GitHub Pages 的完整实战

一篇手把手教程，带你用 GitHub Actions 免费搭建 CI/CD 流水线：从创建 Vite+Vue3 项目、正确配置 base 路径、编写 deploy.yml，到开启 Pages 服务，10 分钟完成“push→自动构建→线上生效”的全流程。附常见白屏、资源 404 排查清单，关键词涵盖 GitHub Actions、Vite、Vue3、GitHub Pages、自动化部署、前端 CI/CD，方便搜索引擎与开发者快速检索。

2025-09-08 21:50:50 574

原创 watchEffect 与 watch的区别

特性watch是否需要手动指定依赖❌ 自动收集✅ 手动指定是否立即执行✅ 默认立即执行❌ 默认不执行（可是否有新旧值❌ 没有✅ 有适用场景简单副作用（打印、网络请求、DOM 操作）精确控制，复杂逻辑（需要新旧值对比）选择的时候：如果页面上一个逻辑需要很多值，且不需要新旧值对比的时候，选择watchEfect。

2025-09-05 20:02:20 481

原创微信小程序两种登录模式深度拆解：授权登录（openid） vs 手机号一键登录（getPhoneNumber），后端缓存 access_token 实战

本文手把手对比微信小程序「授权登录」与「手机号一键登录」的完整链路，用一张表格厘清 loginCode、openid、session_key、phoneCode 四兄弟的区别与用法；给出 uni-app 前端 + Spring Boot 后端可运行代码，重点讲解 access_token 的 2 小时有效期与 Redis 缓存方案，以及个人开发者如何绕过 getPhoneNumber 权限封锁。

2025-09-04 09:18:18 3772

原创前端视角下的 Web 安全攻防：XSS、CSRF、DDoS 一次看懂

详解前端最常见的三大 Web 安全漏洞：XSS、CSRF 与 DDoS。通过 Vue 代码示例演示 XSS 如何窃取 localStorage 中的 JWT Token，对比 Token 与 HttpOnly Cookie 的优缺点，并给出 CSP、CSRF Token、限流、CDN 等可落地的防御方案，帮助前端开发者一站式补齐安全短板。

2025-09-03 10:49:00 1314 1

原创一文吃透 Vue2 与 Vue3 的核心差异

Vue3相较于Vue2的主要改进包括：1）采用Composition API替代Options API，实现逻辑代码聚合和复用；2）响应式系统改用Proxy替代Object.defineProperty，支持更全面的数据监听；3）通过静态标记和区块树优化，显著提升渲染性能；4）全面支持TypeScript，提供更好的类型推断；5）新增Fragment和Teleport等特性；6）重构生命周期钩子，采用onX命名规范，逻辑组合更灵活。这些改进使Vue3更适合开发大型复杂应用，同时保持更好的开发体验和运行性能。

2025-09-01 18:00:32 864

m0_74916313的博客