第105课：生命周期与模板引用——钩子函数、ref 模板引用、nextTick每个 Vue 组件从创建到销毁都会经历一系列步骤：初始化响应式数据、编译模板、挂载到 DOM、响应数据变化更新 DOM、最终卸载。Vue 在这些关键节点暴露了生命周期钩子函数，允许开发者在特定阶段执行自定义逻辑。在组合式 API 中，这些钩子以 onMounted、onUpdated、onUnmounted 等函数的形式存在。同时，Vue 提供了模板引用（Template Refs） 机制，通过 ref 属性直接获取 DOM 元素或子组件实例的引用，配合 nextTick 在 DOM 更新完成后执行操作。理解生...
第104课：组合式 API 基础——setup、computed、watch、watchEffectVue 3 引入的组合式 API（Composition API）并非要取代选项式 API，而是提供了一种基于函数的逻辑组织方式。当组件变得复杂时，选项式 API 将同一逻辑关注点的代码分散在 data、methods、computed、watch 等不同选项中，导致“逻辑碎片化”。组合式 API 允许你将同一功能的所有响应式状态、计算属性和副作用集中在一个函数中，甚至可以提取为独立的 composable（组合函数）在多个组件间复用。本节课将深入 <script setup>...
第103课：Vue 3 响应式原理——reactive、ref、Proxy、依赖收集与触发Vue 3 最核心的变革之一是响应式系统从 Object.defineProperty 迁移到了 Proxy。这不仅仅是底层 API 的替换——它彻底解决了 Vue 2 响应式系统的两大局限：无法检测对象属性的添加和删除，以及无法直接拦截数组的索引修改和 length 变更。Vue 3 的响应式系统通过 Proxy 实现了对任意嵌套对象的完整代理，结合 Reflect 进行默认行为转发，并通过依赖收集（track） 和派发更新（trigger） 构建了一套精确、高效的订阅-发布机制。理解这套机制的原...
第102课：React 性能优化综合——代码分割、React.lazy、Suspense、虚拟列表前几课我们学习了 memo、useMemo、useCallback 等组件级别的性能优化手段。但真正影响用户体验的往往是首屏加载速度和长列表渲染性能。首屏加载慢，用户会离开；长列表渲染卡顿，用户会烦躁。React 提供了两个层面的解决方案：代码分割（Code Splitting） 结合 React.lazy 和 <Suspense> 将代码拆分为小块并按需加载，大幅减少首屏 JS 体积；虚拟列表（Virtualization） 则仅渲染可视区域内的少量 DOM 节点，使得即使数据...
第101课：Zustand 轻量状态管理——创建 Store、异步 action、中间件、与 Redux 对比Redux Toolkit 提供了强大且完整的状态管理方案，但它的概念体系（Store、Reducer、Action、Dispatch、Middleware）和样板代码仍然有一定的学习成本。Zustand（德语“状态”）是一个极简、基于 Hook 的轻量状态管理库，它的核心理念是：状态就是一个普通的 JavaScript 对象，修改状态的函数就定义在这个对象旁边。无需 Provider 包裹、无需 action type 常量、无需 dispatch——你直接调用修改函数即可。Z...
第100课：状态管理：Redux Toolkit（下）——createAsyncThunk、RTK Query、TypeScript 集成上一课我们学习了 Redux Toolkit 的核心——createSlice、configureStore、useSelector 和 useDispatch，掌握了同步状态管理的正确姿势。然而，真实应用中最具挑战性的部分通常是异步操作：从服务器获取数据、提交表单、处理加载中和错误状态。传统 Redux 中处理异步需要手写 thunk、saga 或使用中间件，代码分散且重复。Redux Toolkit 提供了两个强力工具来简化异步：**createA...
第99课：状态管理：Redux Toolkit（上）——Store、Slice、useSelector、useDispatch当 React 应用的状态逻辑变得复杂——跨多个层级的组件需要共享和修改同一份数据、异步请求的状态需要在全局追踪——Context + useReducer 的组合开始显得力不从心。Redux 是 React 生态中最成熟、最广泛使用的全局状态管理库。然而传统 Redux 以样板代码多、配置繁琐著称：你需要手动编写 action creator、action type 常量、以及冗长的 switch-case reducer。Redux Toolkit（RTK） ...
第98课：React Router v6（下）——嵌套路由、导航、useNavigate、路由守卫上一课我们学习了 React Router v6 的路由配置基础——BrowserRouter、Routes、Route 和基本的导航组件。真实的应用远不止简单的“一对一”路径映射：页面通常由共享布局（如侧边栏 + 内容区）组成，不同子页面在布局内切换；用户登录后某些页面才可访问；表单提交后需要编程式跳转；URL 中的查询参数（如搜索关键词、分页）需要方便地读写。React Router v6 为这些场景提供了强大的工具：嵌套路由与 <Outlet> 实现布局复用、**useNa...
第97课：React Router v6（上）——路由配置、BrowserRouter、Routes、Route单页应用（SPA）的核心用户体验之一是无刷新的页面切换——用户点击链接，URL 更新，页面内容变化，但浏览器不会重新加载整个文档。React Router 是实现这一体验的事实标准库。React Router v6 相比 v5 进行了彻底的 API 重构：移除了 <Switch>、移除了 <Route> 的 component/render/children prop、引入了 <Routes> 组件和基于元素的 <R...
第96课：Context API 与状态共享——createContext、Provider、useContext、性能注意事项React 的数据流是自上而下的——Props 从父组件流向子组件。这在简单场景下清晰直观，但当应用中多个层级不同的组件需要访问同一份数据（如当前用户信息、主题、语言偏好、认证状态）时，通过逐层手动传递 Props（“属性钻取”，Prop Drilling）会迅速变得繁琐且难以维护。Context API 提供了一种无需显式逐层传递就能在组件树中广播数据的机制——任何子组件都可以直接订阅 Context 中的数据，无论它嵌套在多深的层级中。理解 Context ...
