Vue3 引入组合式 API（Composition API）和 <script setup> 语法糖，大幅简化组件开发体验。本文通过三个完整 Demo 展示 Vue3 函数式组件（也称无状态/无实例组件）的核心用法。内容包括：ref 创建基础类型响应式变量（如数字计数器），强调 .value 在 JavaScript 中访问/修改值的必要性，以及模板中自动解包无需 .value；reactive 创建对象类型响应式变量，直接修改属性即可触发更新；ref 与 reactive 混合使用时结合 toRefs 解构，保持响应性并支持模板直接访问属性。文件后缀使用 .vue。

本文适用于从 Vue2 迁移或新上手 Vue3 组合式 API 的开发者。

Vue2 采用选项式 API（Options API）作为组件开发范式，通过对象属性定义组件的各个部分。本文通过一个完整的 Vue2 组件 Demo，系统展示选项式 API 的核心概念与用法。内容包括：文件后缀使用 .vue，<template> 模板中展示 Element UI 表格组件及插槽（slot-scope）使用；<script> 中包含 name 组件名称、props 属性定义（类型与必填校验）、components 局部组件注册、data 响应式数据定义（如 crud.loading 与 crud.data）、methods 事件处理方法（selectionChangeHandler），以及完整的生命周期钩子详解（beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed），每个钩子附有核心功能与典型用例说明。<style scoped> 实现样式局部作用域。

本文适用于使用 Vue2 开发组件的开发者。

React 类组件通过继承 Component 类并使用生命周期方法来管理组件状态与副作用。本文通过一个简单的计时器组件 Demo，展示类组件的核心概念：constructor 中初始化 state、componentDidMount 中启动定时器（每秒更新 seconds 状态）、componentWillUnmount 中清理定时器防止内存泄漏，以及 render 方法返回 JSX 视图。文件后缀使用 .jsx。

本文适用于理解 React 类组件基本写法的初学者。

React 函数式组件配合 Hooks 已成为现代 React 开发的主流范式。本文通过一个完整的中心管理页面 Demo，系统展示函数式组件的核心 Hooks 用法。内容包括：useState 管理组件状态（分页参数、表格数据、弹窗显隐、表单值）、useMemo 缓存表单实例避免重复创建、useEffect 执行副作用操作（初始加载数据）。同时展示完整的 CRUD 交互流程：查询表单与表格联动、分页切换、新增/编辑弹窗表单提交、删除确认，以及父子组件传值（通过 props 解构 + useEffect 监听依赖变化）。文件后缀使用 .jsx。

本文适用于使用 React 函数式组件进行业务开发的开发者。

Node.js 开发环境中，版本管理工具 nvm 和高效依赖管理工具 pnpm 是提升开发效率的利器。本文针对 nvm 常见问题进行排查与修复：当 nvm ls-remote 无响应时，清除 nvm 缓存（rm -rf ~/.nvm）、重新安装 nvm（通过 GitHub 代理加速下载），并在 ~/.bashrc 中配置国内镜像源（export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node）。同时介绍 pnpm 的全局安装方法（npm install pnpm -g）及项目依赖安装（pnpm install）。

本文适用于需要配置 Node.js 开发环境的开发者。