第115课：Angular 项目结构与 NgModule——模块化、组件声明、导出、bootstrapAngular 是一个完整的框架——它不仅提供了组件化 UI 的能力，还内置了模块系统、依赖注入、路由、HTTP 客户端和测试工具。与 React 和 Vue 的渐进式哲学不同，Angular 在项目初始化时就提供了标准化的目录结构和清晰的职责划分。理解 Angular 的核心架构概念——特别是 NgModule（模块）是如何组织和装配代码的——是进入 Angular 世界的第一道门槛。NgModule 是 Angular 特有的概念，它将相关的组件、指令、管道和服务聚合到一个编译上下文...
第114课：Vue 与 TypeScript 最佳实践——类型 Props、defineEmits 类型、ComponentPublicInstanceTypeScript 与 Vue 3 的深度结合，使得开发者可以在模板、组件 Props、事件、Composable 和 Pinia Store 中获得全链路的类型安全。然而，Vue 单文件组件（SFC）的 <script setup> 语法和编译宏（如 defineProps、defineEmits）与普通的 TypeScript 函数有所不同，许多开发者在类型标注上仍会踩坑——如何为 Props 提供复杂的联合类型和默认值...
第113课：Vue 性能优化——v-once、v-memo、异步组件、<Suspense>Vue 3 的响应式系统让开发者能够以声明式的方式编写 UI——当数据变化时，视图自动更新。但在某些场景中，这种“自动追踪”会带来不必要的性能开销：大量静态内容的组件在每次父组件更新时都要重新执行渲染函数；列表中仅少数项目发生变化，但整个列表都被重新求值；大型第三方组件在首屏加载时拖慢了整体速度。Vue 3 提供了一系列精细化的性能优化工具来应对这些问题：**v-once** 将元素或组件标记为“仅渲染一次”并跳过后续的响应式追踪；**v-memo** 根据依赖数组有条件地跳过子树更新；...
第112课：选项式 API 对比与迁移——代码组织、逻辑复用、mixins 迁移到组合式Vue 从诞生之初就使用选项式 API：将组件逻辑按选项类型（data、methods、computed、watch 等）组织。这种方式直观、易于上手，但随着组件复杂度的增长，同一逻辑关注点的代码被拆分到不同选项中，形成“逻辑碎片化”。Vue 3 引入的组合式 API 解决了这一问题——将同一功能的所有响应式状态、计算属性和副作用集中在 setup 函数或 <script setup> 中，甚至可以提取为独立的 Composable（组合函数）在多个组件间复用。对于从 Vue 2 迁移过来...
第111课：Pinia 状态管理（下）——插件、持久化、与 TypeScript 集成、组合式 Store上一课我们掌握了 Pinia 的核心三要素：state、getters 和 actions，并通过 Setup Store 语法构建了响应式的购物车模块。在实际项目中，状态管理还需要解决三个进阶问题：如何将关键状态持久化到本地存储以在刷新后恢复？如何为每个 Store 添加通用逻辑（如日志、错误处理）而不侵入业务代码？如何在 TypeScript 中获得从定义到使用的全链路类型安全？Pinia 通过插件系统、内置持久化中间件（pinia-plugin-persistedstate）以...
第110课：Pinia 状态管理（上）——Store 定义、state、getters、actions在 Vue 2 时代，全局状态管理的标准方案是 Vuex。它提供了中心化的 Store、严格的状态变更流程（通过 mutations）和模块化机制。然而 Vuex 在类型推断（TypeScript 支持）、模块嵌套的复杂性和样板代码方面存在不足。Pinia 是 Vue 官方新一代状态管理库，为 Vue 3 设计，同时也支持 Vue 2。它的核心理念是：Store 就是一个普通的 JavaScript 对象，拥有 state（数据）、getters（计算属性）和 actions（方法），完...
第109课：Vue Router 4（下）——导航守卫、路由元信息、懒加载、过渡动画上一课我们掌握了 Vue Router 4 的基础——路由配置、动态参数和导航方式。但真实的项目远不止路径映射那么简单：你需要在用户进入某些页面之前验证登录状态，在离开表单页面前提示保存数据，在路由跳转时显示加载进度条，为每个页面动态设置标题以利于 SEO，以及在页面切换时添加平滑的过渡动画。Vue Router 4 通过导航守卫（Navigation Guards）、路由元信息（Route Meta）、路由懒加载和与 <Transition> 组件的集成，提供了所有这些高级能力。本节课将逐一...
第108课：Vue Router 4（上）——路由配置、动态路由、router-link、router-view在单页应用（SPA）中，页面切换不应触发整个文档的重新加载——而是通过 JavaScript 动态替换视图内容，同时更新浏览器 URL。Vue Router 是 Vue.js 官方的路由管理器，它与 Vue 3 深度集成，提供了声明式导航（<router-link>）、视图占位（<router-view>）、动态路由参数、嵌套路由和编程式导航（useRouter/useRoute）等能力。Vue Router 4 是为 Vue 3 全新设计的版...
第107课：组件通信（下）——插槽、作用域插槽、动态组件、provide/inject上一课我们学习了父子组件通信的核心机制：Props 和 Emits 以及 v-model。这些机制适用于直接父子关系的组件。然而，实际应用中组件树往往更深、更复杂：你需要将内容动态注入到子组件的特定位置（插槽），或者让兄弟组件和跨层级组件共享数据而无需逐层传递 Props（provide/inject），或者根据运行状态动态切换渲染的组件（动态组件）。本节课将系统讲解这四种进阶通信模式：插槽（将模板内容从父组件传递到子组件）、作用域插槽（将子组件数据反向传递给父组件的模板）、动态组件...
第106课：组件通信（上）——Props、defineProps、defineEmits、v-model 实现Vue 组件树中的通信遵循单向数据流原则：数据从父组件通过 Props 向下流动到子组件，子组件通过事件（Emits） 向上通知父组件发生了某些事情。这一“Props down, Events up”的模式是 Vue 组件化架构的基石，它使得数据流可预测、易于调试。在此基础上，Vue 3 提供了 v-model 的增强语法，允许父子组件之间实现便捷的双向绑定——这本质上仍是 Props 和 Emits 的组合，但语法上更为简洁。理解 Props 的类型校验、单向数据流约束、Emi...
