- 博客(156)
- 收藏
- 关注
RSS订阅原创 原生JS实现“无缝轮播
市面上无缝轮播图组件很多，但是要么依赖框架，整包 200 KB 起； 要么用 `left` 做位移动画，移动端掉帧。本文手写一套“无依赖、可扩展、易换肤”的轮播引擎，目标体积 < 15 KB（gz），动画 60 FPS，后端扔五张图就能跑。
2025-09-16 10:30:00
738
原创 JS打造“九宫格抽奖”
在如今的营销活动中，抽奖功能已经成为提升用户活跃度的标配。尤其是“九宫格抽奖”这种形式，因其视觉冲击力强、交互简单、适配性好，被广泛应用于电商、社交、内容平台等各类场景。本文将带你从零开始，使用 原生 JavaScript 实现一个可配置、可扩展、动画流畅的九宫格抽奖组件，支持运营人员通过 JSON 配置奖品信息，前端无需上线即可更新抽奖内容。
2025-09-15 10:30:00
925
1
原创 JS 打造「放大镜 + 缩略图」一体组件
电商详情页的经典三件套：缩略图列表 + 中等图展示 + 局部放大图。本文js原生代码实现一条无依赖、可复用、可扩展的放大镜链路，涵盖事件委托、边界计算、背景定位三大核心技能。
2025-09-14 10:00:00
506
原创 JS 打造仿腾讯影视轮播导航
首页 Banner 不是简单的「几张图轮播」，而是「大图 + 侧边导航 + 自动播放 + 手动介入」的复合组件。本文用 JS原生代码实现一条无依赖、可复用、可扩展的影视轮播链路，涵盖数据驱动、事件委托、状态管理三大核心技能。
2025-09-13 17:53:11
504
原创 原生 JS 打造三级联动
后台表单、招生官网、招聘系统都离不开「省-市-学校」三连下拉。本文用 js原生代码实现一套零依赖、可复用、可扩展的三级联动，数据与渲染彻底解耦，换一批数据也能秒上线。
2025-09-12 10:00:00
273
原创 JS 打造动态表格
后台列表页最常见的需求：点击表头排序 + 一键全选。本文用原生js代码实现零依赖方案，涵盖 DOM 查询、排序算法、事件代理三大核心技能。
2025-09-10 10:00:00
444
原创 JS 打造丝滑手风琴
手风琴菜单是后台与官网的常客，但 90% 的实现依赖第三方库或 CSS Transition。今天原生 JS 手写一条「高度动画 + 状态机」的完整链路，打造丝滑手风琴效果。
2025-09-09 10:00:00
331
原创 JS实现丝滑文字滚动
公告栏、弹幕、股票 ticker……垂直文字滚动是前端最常见的动效之一。本文用纯原生代码拆解一条「克隆 + 逐帧滚动」的实现思路，涵盖布局、滚动、边界衔接三大要点，开箱即用，零依赖零配置。
2025-09-08 10:00:00
328
原创 Vue 路由传参的四种方式
在单页应用里，路由是连接页面与数据的桥梁。Vue Router 提供了四种方式把「参数」从地址栏、内存甚至编译期注入到组件。理解它们的差异，才能在面试和线上故障中游刃有余。
2025-09-07 10:00:00
442
原创 Vue 项目性能优化实战
性能优化有一套「发现 → 定位 → 解决」的闭环方法论。本文以真实项目为蓝本，从编码阶段到上线监控，给出一条可落地的 Vue 性能优化路线图。
2025-09-06 19:09:11
492
1
原创 name属性Vue组件的身份标识
在 Vue 世界里，name 不是装饰，而是组件的「身份标识」。它能让递归组件找到回家的路，能让 keep-alive 精准缓存，也能让 DevTools 的层级树一目了然。
2025-09-05 10:00:00
237
原创 Vue3 模板编译优化
在 Vue2 时代，模板里写一段纯静态 HTML 也会在每次响应式更新时被重新创建、重新 diff。Vue3 把「编译」从简单的语法糖升级为全链路性能优化器：它把静态节点抬出渲染函数、把动态节点打上补丁标记、把事件缓存起来、把整棵树切成可跳过静态的 Block。
2025-09-04 10:00:00
315
原创 Vue 3 模板编译器
当我们写下 <div>{{ msg }}</div> 时，浏览器看到的既不是标签，也不是文本，而是一段可执行的 JavaScript 函数。这道转换由 Vue 的模板编译器完成：它把纯文本一步步转化为渲染函数，并在此过程中完成静态提升、指令降级、依赖标记等优化。
2025-09-03 10:00:00
324
原创 Vue 3 快速 Diff
当响应式数据变化，虚拟 DOM 树瞬间翻新。Diff 算法的职责，是在新旧两棵树之间寻找“最小可感知的差异”，并把这些差异映射为最少的 DOM 指令。Vue 2 的双端 Diff 已足够优秀，但 Vue 3 通过“快速 Diff”进一步把复杂度削到极致——无一次多余移动，无一次多余创建。本文带你走进这条由索引、哈希、LIS 构成的精密流水线。
2025-09-02 10:00:00
558
原创 最长递增子序列：从经典算法到 Vue3 运行时核心优化
最长递增子序列（Longest Increasing Subsequence，LIS）正悄然成为性能分水岭。它不仅是面试的高频考点，更是 Vue3 快速 Diff 算法赖以实现 O(n log n) 复杂度的关键数据结构。
2025-09-01 10:00:00
366
原创 从双端到快速：Vue 3 Diff 的进化之路
当组件状态变化，Vue 会生成一棵全新的虚拟 DOM 树。如果每次都推倒重建，页面必然卡顿。Diff 算法就是「找出最小差异」的那把手术刀。Vue 2 的双端 Diff 已经很快，Vue 3 却用「快速 Diff」让它更快。
2025-08-31 10:00:00
358
原创 watch 与 computed：Vue3响应式的抉择
在 Vue 的响应式宇宙里，数据变化最终都会触发「副作用」：可能是重新渲染 DOM、发送网络请求，也可能是打印一条日志。Vue 提供了两条官方路线来捕获这些副作用——computed 与 watch。它们共享同一套依赖追踪引擎，却以截然不同的姿态服务于业务。
2025-08-30 10:00:00
370
原创 深入 Vue3 computed
本文解析Vue computed属性的实现机制，其核心是"惰性求值+依赖收集+脏检查缓存"的三重设计。通过dirty标志位控制缓存更新，仅在首次读取或依赖变化时重新计算；利用effect包裹getter实现精准依赖追踪；拒绝异步以保证数据一致性。文章还分析了可写computed的双通道实现，并指出异步场景应使用watch替代。computed的同步缓存特性是Vue性能优化的重要设计。
2025-08-29 08:40:04
651
原创 Vue 事件系统
在模板里写一行 @click="handler"，背后却是一套从编译器到渲染器、再到 DOM 事件再绑定的精密流水线。本文带你拆解事件在 Vue 内部的完整生命周期。
2025-08-28 09:00:00
204
原创 Vue渲染器解析
渲染器是 Vue 与浏览器之间的「翻译官」。它拿到一份用 JavaScript 对象描述的 UI（虚拟 DOM），然后精准地创建、更新、销毁真实 DOM，同时把响应式数据和渲染函数绑定成一条自动刷新的流水线。
2025-08-27 09:00:00
287
原创 Vue 3 运行机制
当你写下 <div>{{ msg }}</div>，浏览器最终看到的却是一连串精确到像素的绘制指令。Vue 3 在这条链路里扮演了「翻译官 + 调度者」的双重角色：把声明式模板翻译成渲染函数，再把渲染函数翻译成真实 DOM，并在数据变化时以最小代价更新视图。
2025-08-26 10:00:00
1693
原创 Vue3的渲染秘密：从同步批处理到异步微任务
面试里，当面试官把两段看似「都是改 5 次数据」的代码摆在你面前，却问「渲染了几次？」，如果你只回答「改了 5 次所以 5 次」，那大概率就踩坑了。本文用 100 行代码把同步批处理与异步微任务的底层机制拆开讲透，让你以后遇到同类问题直接秒答。
2025-08-25 10:00:00
703
原创 Vue3 响应式革命
Vue3通过Proxy重构响应式系统，彻底解决了Vue2中Object.defineProperty的局限性。文章从拦截机制、数据创建和依赖收集三方面详解：Proxy实现全属性拦截，无需手动触发更新；ref/reactive分工处理原始值和对象；依赖收集从组件级优化为函数级，提升性能。工程上建议优先使用reactive管理对象，避免双重代理，并利用markRaw优化大对象。这一底层重构不仅解决了Vue2的响应式盲区，更为性能优化奠定基础。
2025-08-24 09:00:00
321
原创 Vue 逻辑抽离全景解析
当多个组件拥有重复的 data、生命周期钩子或业务函数时，复制粘贴会迅速演变成维护灾难。Vue 生态提供了三条主流路径：Mixin、高阶组件、Composition API。本文按时间线梳理它们的适用场景、合并策略与陷阱，帮助你在 Vue2 与 Vue3 中做出最优技术选型。
2025-08-23 10:00:00
368
原创 从 Vue 2 到 Vue 3
Vue 3 不是「加量版」Vue 2，而是一次底层重写与范式革新。它保留了熟悉的模板语法，却在编译器、运行时、响应式系统、TypeScript 支持等维度做了系统性升级。
2025-08-22 08:34:31
964
原创 Vue 3全面提速剖析
Vue 3在性能上实现重大突破，通过三大优化维度显著提升效率：1）渲染更快，采用Block Tree减少Diff复杂度，静态提升降低内存消耗，PatchFlag实现精准更新；2）包体更小，模块化设计配合Tree-Shaking使体积缩小41%；3）内存更省，Proxy替代defineProperty减少初始化负担，WeakMap自动释放依赖。官方数据显示，Vue 3在渲染速度、内存占用等方面均有大幅提升，性能优势明显。
2025-08-21 08:35:33
321
原创 Vue 自定义指令
在 Vue 中，组件负责“可见”的 UI，自定义指令则负责“不可见”的底层 DOM 行为。当你需要直接操作节点、监听第三方库、或封装浏览器原生 API 时，指令往往比组件更轻量、更灵活。Vue 为自定义指令设计了五条钩子函数，覆盖从首次绑定到最终解绑的完整生存周期。
2025-08-20 08:31:22
600
原创 Vue 事件绑定机制
Vue 将事件系统拆分为原生 DOM 事件与自定义组件事件两套正交实现，前者对接浏览器事件循环，后者基于发布–订阅模型。本文以 v-on（缩写 @）为线索，结合运行时源码路径，给出端到端的实现剖析。
2025-08-19 08:55:43
549
原创 Vue SSR原理
当搜索引擎的爬虫访问我们的站点时，如果只看到一句冷冰冰的 <div id="app"></div>，SEO 基本就凉了。Vue SSR（Server-Side Rendering，服务端渲染）正是为了解决这个问题：让首屏 HTML 在服务器上生成，既能被爬虫读懂，又能让用户以最短的时间看到内容。
2025-08-18 12:00:00
646
原创 深入 Vue 的 nextTick
在初学 Vue 时，我们经常会遇到这样的困惑：数据明明已经改了，可页面却没立刻变化；或者手动去获取更新后的 DOM，结果拿到的是旧值。这时候，Vue 官方会推荐我们使用 this.$nextTick()。它到底做了什么？为什么“等一下”就能解决问题？本文尝试用通俗的语言把它的作用和实现原理讲清楚。
2025-08-17 12:00:00
746
原创 深入理解 Vue Router
在前端单页应用（SPA）中，路由是连接用户操作与页面展示的核心桥梁。Vue Router 作为 Vue 官方的路由管理器，提供了丰富的功能和灵活的配置。本文将围绕“路由模式”、“router 与 route 的区别”、“导航守卫的种类”以及“完整的导航解析流程”四个方面，带你深入理解 Vue Router 的工作机制。
2025-08-16 12:00:00
635
原创 Vue 2 生命周期全景剖析
生命周期不是营销词汇，而是 Vue 2 运行时内部「可观测的执行链路」。掌握其精确时序，意味着能够在正确的时间点干预响应式系统、DOM 渲染与依赖收集，从而避免性能回退与内存泄漏。下文以源码级视角拆解八个阶段，并给出在大型应用中的工程级实践。
2025-08-15 12:00:00
1187
原创 单页面应用路由切换动画
单页应用没有浏览器自带的整页刷新动画，路由切换像「瞬间切图」，用户体验生硬。本文演示如何借助 Vue Router 的导航守卫 + Vue 的 <transition> 系统，实现方向感滑动动画（前进右滑，后退左滑），并保持嵌套路由、异步组件、keep-alive 等特性零侵入。
2025-08-14 12:00:00
370
原创 Vue嵌套路由
在单页应用里，“页面”不再是整屏刷新，而是由路由驱动的组件树。当业务复杂到「用户中心 → 个人资料 / 收货地址 / 账号安全 / 好友列表」这种层级时，嵌套路由（Nested Routes）是唯一能把深度与可维护性同时保留下来的方案。
2025-08-13 12:00:00
371
原创 Vue CLI相关配置
Vue CLI 把 webpack、babel、postcss、dev-server 等工具链封装成「零配置」工具，但真实项目总有「自定义 loader、路径别名、代理转发、多环境差异」等需求。本文围绕一份渐进式的 `vue.config.js`，从本地开发到线上部署，逐条拆解每个配置项使用方法。
2025-08-12 12:00:00
752
原创 Vue脚手架模式与环境变量
在真实项目里，「如果每次切换环境都手动改代码，不仅低效，还极易把测试地址带到线上。Vue CLI 把「模式 + 环境变量」做成了一套约定大于配置的体系，只要理解规则，就能让同一份源码在任意环境自动作出正确的行为。
2025-08-11 12:00:00
388
原创 前端虚拟长列表
当一次性渲染十万条 DOM 节点时，浏览器会瞬间陷入「卡顿—白屏—崩溃」三连击。虚拟长列表（Virtual Scroller）把「按需渲染」做到极致：只绘制可见区域并加少量缓冲，让巨量数据在低端设备也能保持 60 FPS。
2025-08-10 12:00:00
595
使用ECharts创建一个带有精美无缝圆形动效的环形图
2025-04-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人