JavaScript三大主流框架基础总结

以下是JavaScript三大主流框架（React、Vue、Angular）的基础总结，包括核心概念、特点和简单示例：

一、React

定位: 用于构建用户界面的声明式 JavaScript 库（专注于UI层，需搭配其他库形成完整解决方案）。
核心概念:

1. JSX

   • 允许在JavaScript中编写类似HTML的语法，最终被编译为React元素。

     const element = <h1>Hello, {name}</h1>;
     

2. 组件化

   • 函数组件（推荐）: 使用Hooks管理状态。

     function MyComponent() {
       const [count, setCount] = useState(0);
       return <button onClick={() => setCount(count + 1)}>{count}</button>;
     }
     

   • 类组件（旧版）: 使用this.state和生命周期方法。

3. 状态管理

   • 内置useState、useReducer等Hooks；复杂场景用Context API或Redux。

4. 虚拟DOM

   • 通过Diff算法高效更新真实DOM，提升性能。

特点:

• 单向数据流（父→子通过props传递）。
• 生态丰富（React Router、Redux、Next.js等）。

二、Vue

定位: 渐进式框架（可逐步集成，核心库专注视图层）。
核心概念:

1. 模板语法

   • 基于HTML的模板，支持插值和指令（如v-if, v-for）。

     <div>{{ message }}</div>
     <button @click="increment">Click</button>
     

2. 响应式数据

   • Vue 3使用ref和reactive（基于Proxy）。

     setup() {
     const count = ref(0);
     const increment = () => count.value++;
     return { count, increment };
     }
     

3. 组件系统

   • 单文件组件（.vue文件，包含<template>, <script>, <style>）。

4. 组合式API（Vue 3）

   • 替代Options API，逻辑复用更灵活。

特点:

• 双向数据绑定（v-model简化表单输入）。
• 学习曲线平缓，文档友好。
• 官方路由（Vue Router）和状态管理（Vuex/Pinia）。

三、Angular

定位: 全功能企业级框架（基于TypeScript，内置完整解决方案）。
核心概念:

1. TypeScript优先

   • 强制类型检查，提升代码健壮性。

2. 依赖注入（DI）

   • 通过注入服务（Service）实现模块解耦。

     @Injectable()
     export class DataService { ... }
     

3. 组件与装饰器

   • 使用@Component定义组件元数据。

     @Component({
     selector: 'app-root',
     template: `<h1>{{ title }}</h1>`
     })
     export class AppComponent { title = 'My App'; }
     

4. 模块化（@NgModule）

   • 将组件、服务、路由等封装为模块。

特点:

• 双向数据绑定（[(ngModel)]）。
• 内置RxJS支持（响应式编程）。
• 官方工具链完善（CLI、Angular Universal服务端渲染）。

四、对比与选择

五、学习资源

• React: 官方文档
• Vue: Vue 3 指南
• Angular: 官方教程

掌握任一框架后，可进一步学习状态管理、路由及服务端渲染（如Next.js/Nuxt.js/Angular Universal）。