终生学习和实践，坚持做一个长期主义者

2026年07月12日技术分享7 分钟阅读

Mac 上管理多个 MySQL 实例的经验

在 Mac 上同时安装了 Homebrew 和 .dmg 两个版本的 MySQL，版本不一致让人困惑。本文记录如何查看版本、排查冲突、卸载旧版本，以及日常管理 MySQL 的最佳实践。

2026年06月15日技术分享15 分钟阅读

React 渲染流程全解析：render 与 commit 两大阶段

React 渲染分为 render（调度 + 协调，异步可中断）和 commit（渲染器同步执行）两大阶段。render 阶段通过深度优先遍历构建 Fiber Tree，commit 阶段将副作用提交到宿主环境。

2026年06月01日技术分享18 分钟阅读

React 架构演进之路：从 Stack 到 Fiber

React 15 及之前采用 Stack 架构，递归遍历虚拟 DOM 树无法中断；React 16 重构为 Fiber 架构，通过链表实现可中断的时间切片，并引入 Scheduler 调度器解决优先级问题。

2026年05月25日技术分享12 分钟阅读

深入理解虚拟 DOM：原理、优势与 React 实现

虚拟 DOM 是 React 团队提出的编程概念，用 JS 对象描述 UI 结构。相比 innerHTML，虚拟 DOM 在更新阶段能最小化 DOM 操作，同时具备多平台渲染的抽象能力。

2026年05月15日技术分享10 分钟阅读

现代前端框架的分类：元素级、组件级与应用级

现代前端框架基于状态声明式渲染，可用 UI=f(state) 概括。根据自变量与 UI/组件/应用的对应关系，框架可分为元素级（Svelte、Solid.js）、组件级（Vue）和应用级（React）三类。

2025年12月18日技术分享24 分钟阅读

Vite 构建工具深度解析：从配置到插件

从核心原理到配置文件，从依赖预构建到生产打包，从环境变量到自定义插件，全面解析Vite构建工具。

2025年12月02日技术分享20 分钟阅读

Vue3 高级特性：透传、依赖注入与异步组件

掌握属性透传机制、依赖注入跨层级通信、组合式函数逻辑复用，以及异步组件与Suspense的最佳实践。

2025年11月15日技术分享25 分钟阅读

Vue3 setup 语法糖、生命周期与 KeepAlive 原理

从 setup 演进史到 KeepAlive 缓存实现，再到 key 的 diff 算法作用，全面理解 Vue3 核心机制。

2025年11月02日技术分享18 分钟阅读

Vue3 组件原理：指令、插槽与 v-model 的实现

指令在编译后会被转换为不同的渲染函数逻辑，插槽本质是父组件向子组件传递函数对象，v-model 则是 props 和自定义事件的语法糖。本文通过编译结果逐一验证。

2025年10月18日技术分享23 分钟阅读

手写 Vue3 响应式系统（下）：Computed 与 Watch 的实现

基于上篇构建的响应式基础设施，手写 computed 的缓存与脏值检测机制、watch 的深度追踪与调度控制，揭示其优雅设计。

2025年10月05日技术分享22 分钟阅读

手写 Vue3 响应式系统（上）：从 Effect 到依赖收集

从零手写 Vue3 响应式系统核心——Proxy 拦截、track 依赖收集、trigger 派发更新，逐行解析 effect 嵌套、依赖清理与无限循环处理。

2025年09月22日技术分享15 分钟阅读

Vue3 响应式与组件渲染的协作机制

揭秘 Vue3 中响应式数据如何驱动组件渲染、精准定位更新目标、以及轻松实现跨组件数据共享的完整机制。

2025年09月10日技术分享24 分钟阅读

Vue3 响应式系统核心：数据拦截与依赖追踪

深入解析 Vue3 响应式系统的底层基石——从 Object.defineProperty 到 Proxy 的数据拦截进化，掌握依赖收集与派发更新的完整链路。

2025年08月25日技术分享21 分钟阅读

Vue3 模板编译原理：解析器、转换器与生成器

揭开 Vue3 模板编译的神秘面纱：从模板字符串到 AST 解析、转换、代码生成的全过程，以及组件树与虚拟 DOM 树的架构关系。

2025年08月08日技术分享19 分钟阅读

深入理解虚拟 DOM：从浏览器原理到 Vue3 实践

从浏览器底层 DOM 工作原理讲起，层层递进理解虚拟 DOM 的本质、设计动机与性能真相，并结合 Vue3 的 h 函数进行实战演练。

2025年07月21日技术分享26 分钟阅读

Vue3 前端路由与状态管理入门

掌握 Vue3 生态三大核心库：Vue Router 前端路由、Pinia 状态管理以及 Element Plus 组件库的完整入门实践。

2025年07月03日技术分享18 分钟阅读

Vue3 组件高级通信：v-model 与插槽

深入掌握 Vue3 组件通信的两大进阶利器：v-model 双向绑定语法糖的原理与多绑定用法，以及插槽机制从默认插槽到作用域插槽的完整实践。

2025年06月30日技术分享20 分钟阅读

Vue3 动画系统与自定义指令实战

从自定义指令到底层DOM操作，从Transition过渡动画到Teleport传送门，全面掌握Vue3进阶特性。

2025年06月15日技术分享23 分钟阅读

Vue3 组件基础：Props 与自定义事件

掌握 Vue3 组件化开发核心：单文件组件结构、全局与局部注册、Props 的类型校验与单向数据流、自定义事件实现子传父通信，以及事件校验机制。

2025年05月28日技术分享27 分钟阅读

Vue3 生命周期与侦听器完全指南

理解 Vue3 组件从创建到销毁的完整生命周期，掌握 onMounted 实战用法。深入对比 watch 与 watchEffect，覆盖深层侦听、回调时机、手动停止及 Vue2/Vue3 钩子差异。

2025年05月10日技术分享24 分钟阅读

Vue3 事件处理与表单双向绑定实战

掌握 Vue3 中 v-on 事件绑定的各种姿势：内联处理器、事件对象传递、修饰符链式调用。深入理解 v-model 双向绑定的原理及 .lazy/.number/.trim 修饰符实战应用。

2025年04月22日技术分享22 分钟阅读

Vue3 样式绑定、条件渲染与列表渲染

深入掌握 Vue3 中 class 与 style 的动态绑定技巧，理解 v-if/v-show 的差异与适用场景，学会 v-for 的各种遍历方式及 key 的最佳实践。

2025年03月18日技术分享13 分钟阅读

Vue3 响应式基础：ref 与 reactive 深度对比

Vue3 提供了 ref 和 reactive 两个核心 API 来创建响应式数据。本文深度对比两者的使用场景、底层原理、解包行为与局限性，并介绍 readonly、toRef、toRefs 等辅助 API。

2025年02月25日技术分享10 分钟阅读

Vue3 模板语法全解析：从插值到指令

Vue3 的模板语法基于 HTML，但提供了数据绑定、JavaScript 表达式、指令等增强特性。本文全面解析文本插值、原始 HTML、属性绑定、JS 表达式与沙盒机制等核心概念。

2025年01月12日技术分享9 分钟阅读

Vue3 学习路线与开发环境搭建

从零开始学习 Vue3，首先要明确学习路线。本文梳理了 Vue3 的知识体系：快速入门 → 深入本质 → 细节补充，并详细介绍开发环境搭建，包括 Vite 工程化配置。

2024年12月06日技术分享10 分钟阅读

对象数组合并四法

在日常开发工作中总结的一个实用方法：当两个数组的长度不一致时，按索引直接合并就不再可靠了，需要基于指定的属性进行匹配连接。常见了有四种，类似于SQL中的连接操作。假设我们有以下两个数组： 1. 左连接（Left join，以 arr1…

2024年09月23日技术分享3 分钟阅读

VSCode中未发生变化Git显示有差异

在 VSCode 中未发生变化，但 Git 显示有差异的原因及解决方法。不同的操作系统默认的换行符不同，Windows 使用\r\n, Linux 使用 \n，如果文件在不同的操作系统之间移动，可能会导致换行符不一致，从而显示为修改…

2024年08月23日技术分享6 分钟阅读

使用透视照相机绘制多个立方体

本文实例主要通过使用 THREE. PerspectiveCamera，实现在场景中通过透视照相机以透视效果绘制多个立方体。在场景中以透视效果绘制的三个立方体，如下：主要代码如下：对于透视投影而言，投影的结果除了与几何体的角度有关…

2024年08月22日技术分享6 分钟阅读

使用CameraHelper绘制正交相机

通过在 THREE. CameraHelper() 方法的参数中设置 OrthographicCamera，实现绘制辅助线以查看正交相机的「视角范围」。当浏览器显示页面时，绿色的圆球将不停的旋转…

2024年08月20日技术分享5 分钟阅读

使用正交相机绘制多个立方体

此实例主要通过使用 THREE. OrthographicCamera，实现在场景中根据正交相机的投影规则绘制多个立方体。在下面的代码中 myCamera = new THREE. OrthographicCamera(-sk, sk,…

2024年07月22日技术分享5 分钟阅读

在场景中自定义光源绘制立方体

> (1) 创建渲染器，如 new THREE. WebGLRenderer(); > (2) 指定渲染器在哪里渲染，如 $('#myContainer').append(myRenderer.domElement); > (3)…

2024年06月11日技术分享9 分钟阅读

前端更新部署后如何通知用户刷新

1.方案一：需要后端配合的方案如果后端可以配合我们的话，可以使用websocket与后端进行实时通讯，前端部署完成后，后端发出一个通知。前端检测到通知消息后，进行提示。还可以再进一步优化下，使用EventSource…

2024年05月29日技术分享17 分钟阅读

Redux原理流程及异步请求处理

React 是视图层框架。Redux 是一个用来管理数据状态和 UI 状态的 JavaScript 应用工具。随着 JavaScript 单页面应用(SPA)开发日趋复杂，JavaScript 需要管理的更多的状态(state)…

2024年04月27日技术分享39 分钟阅读

缓存之 HTTP 缓存

强制缓存不用去判断这个缓存是已过期，就可以直接使用，而协商缓存在每次获取缓存资源的时候，需要浏览器向服务器端进行询问（请求），该资源有没有更新，有更新则使用服务器端响应的最新的资源，如果没有更新就使用缓存中的内容，简而言之协商缓存需要通过客户端向服务器端请求协商缓存的相关信息，进而判断是否需要就内容进行重新请求。

2024年03月05日技术分享5 分钟阅读

Redux数据管理之store

store:用于保存数据，通过createStore()创建的对象。该对象的成员： - dispatch:分发一个action - getState:得到仓库中当前的状态 - replaceReducer：替换掉当前的reducer -…

2024年03月03日技术分享14 分钟阅读

React渲染原理

渲染：生成显示的对象，以及将这些对象形成真实的 DOM 对象的过程就叫做渲染。 React 元素(React Element): 通过 React.createElement 创建，也可以通过 JSX 表达式(语法糖) 创建…

2024年03月03日技术分享13 分钟阅读

Redux数据管理之reducer

Reducer是用于改变数据的函数 1.一个数据仓库，有且仅有一个reducer，并且通常情况下，一个工程只有一个仓库，因此，一个系统，只有一个reducer 2.为了方便管理，通常会将reducer放到单独的文件中。…

2024年03月03日技术分享5 分钟阅读

Redux数据管理之action

1.action是一个plain object(平面对象)，它的隐式原型对象指向Object.prototype，通过对象字面量的方式创建 2.action必须有type属性，该属性用于描述操作的类型，类似于请求地址和请求方法的综合体…

2024年03月01日技术分享4 分钟阅读

使用Redxu管理数据

其中核心模块式action、store、reducer，一般情况下先写reducer的逻辑，相当于MVC中的控制器controller，实现对数据的操作、修改，但凡涉及到数据的改变，都需要reducer介入。…

2024年02月05日技术分享17 分钟阅读

关于map和set

一、ES6 中新增 Set、Map 数据结构的介绍 Set => 集合，Map => 字典集合：无序、相关联、且不重复的元素组成的组合，类似数组字典：每个元素都有一个称作 key 和 value 区分：共同点：都可以存储不重复的值不同点：集合是[值, 值]、字典是[键, 值]的形式存储

2023年03月02日技术分享3 分钟阅读

移动端适配方案

移动端适配方案主要包括媒体查询、REM布局、ViewPort单位、Flexbox布局和CSS框架。 - 媒体查询：使用CSS3的媒体查询功能，根据设备的屏幕宽度和高度等特性，设置不同的CSS样式，从而实现页面的适配。这种方案简单易用…

2023年02月01日技术分享2 分钟阅读

前端框架的由来

第1阶段：服务端渲染，主要标志是由服务器进行页面的组装、渲染，该阶段由于后端承担了部分前端页面组装工作，工作量巨大，前端主要是根据设计图，编写简单的静态页面及样式，前后端工作需要进行业务的重新划分。第2阶段：前后端分离…

2023年01月02日技术分享16 分钟阅读

HTTP/1.1、HTTP/2和HTTP/3的区别

每当说起HTTP/1.1，我都会想起以前叫外卖的方式，那个年代没有智能手机，绝大部分都是堂食。很多店都没有专门的外卖员，打电话点了外卖以后，老板就会叫人把外卖送过来。但是这种方式有一个很大的问题，店员老是忘记放筷子…

2021年08月22日技术分享14 分钟阅读

js正则表达式扩展知识

创建正则表达式有两种方式：字面量和实例 - cont reg = /正则表达式/修饰符 - const reg = new RegExp(正则表达式，修饰符) i 忽略大小写匹配；m 多行匹配； g 全局匹配；修饰符可以写多个，例如…

2021年07月20日技术分享17 分钟阅读

实现分栏宽度拉伸调整的方法

最近在进行开发时，遇到需要动态拉升左侧区域，从而改变左右两栏尺寸的布局需求。这是一个很常见的场景，通过 DOM 操作来实现是第一个想到的方法。仔细查找资料，在大神张鑫旭的博客上发现还有一个性能更好，利用纯 CSS…

2021年04月18日技术分享14 分钟阅读

JS中reduce()的用法

日常工作中对数组中的 API 使用频率还是挺高的，唯独 reduce()，在阅读相关介绍时，一直很难理解，只记得数组求和和去重，能够用到它，其他地方怎么用，就无法灵活变通了。今天索性来认真地总结一下reduce()的用法…

2021年01月29日技术分享8 分钟阅读

mac os vscode 遇到的问题

今年开始就正式步入使用 mac os 系统的时代，使用了11年(2010-2020年)的 windows 系统，终于明白什么叫做转换成本。mac os 系统使用起来，的确十分流畅，没有广告，不用下载杀毒软件。作为开发人员，visual…

2021年01月27日技术分享5 分钟阅读

下载Blob文件及IE&Edge兼容

IE或Edge浏览器下，在导出(下载)的时候，有时会返回blob文件流的数据，而不是返回URL地址。此时表现为，能够通过单独访问URL可导出文件，但做为http或https请求时，却无法导出(下载)文件…

2021年01月20日技术分享3 分钟阅读

xmind快捷键整理

| 快捷键（win）| 快捷键（mac） | 描述 | | --- | --- | --- | | ctrl+n | cmd+n | 创建新文件 | | ctrl+o | cmd+o | 打开新文件 | | ctrl+s | cmd+s…

2020年10月15日技术分享16 分钟阅读

JavaScript中的各种骚操作

写这篇文章的缘由是最近感觉在公司的一些需求和功能开发需求上，对一些js处理不是很熟练，缺乏一些技巧。因此整理了一份在实际开发过程中常用的 js 技巧，灵活地运用，能够解决问题的能力，也会对代码的简洁性有较大的提升。…

2020年09月28日技术分享14 分钟阅读

学习React钩子函数,以useEffect为例

尽管 React 16中的 hooks相对于 React 17已经是很久远的新鲜事物，奈何基础薄弱，接下来还是想从头开始梳理一下React hook 、函数式编程和函数式组件相关的知识。

2020年05月26日技术分享27 分钟阅读

读懂 JS 装饰器

知道装饰器还是在 Mobx 中见过类似的语法，对某个类或属性或方法进行包装修饰，是一种与类（class）相关的语法，用来注释或修改类和类方法，是实现面向切面编程（AOP）的一种重要模式。下面是一个使用装饰器修饰属性的简单例子…

2020年05月26日技术分享9 分钟阅读

关于数组的一些使用技巧

在 JavaScript 编程中，数组是常见的存储数据的方式，对于数组的使用有多种方式。本文将向大家展示一些可能需要用到，但却不知道的数组处理技巧。持续地学习和使用这些技巧，提升我们的编程实力。将数组中的所有值相加，可以通过…

2020年05月06日技术分享11 分钟阅读

在阿里云虚拟主机搭建Hexo博客

“导出” -> “Wordpress”），可以导出所有的文章、评论、归档到一个 xxx. xml 的文件中。然后，执行下面的命令，即可将 xxx. xml 中的文章生成 source 目录下的 . md 格式的文件。这样就将…

2020年03月01日技术分享113 分钟阅读

webpack 4 实战学习笔记记录

webpack是基于nodejs开发的模块打包工具。提升webpack打包速度，一定要安装最新稳定版本。(1) node版本要使用最新稳定版；（2）webpack要使用最新版本；webpack安装方式

2019年11月26日技术分享5 分钟阅读