React 框架与 Vue 框架的体系区别笔记

React:
- 组件化开发：React 的核心思想是将 UI 拆分为独立的、可复用的组件，每个组件管理自己的状态和逻辑。
- 函数式编程：React 推崇函数式编程思想，鼓励使用纯函数和无副作用代码。
- 单向数据流：数据通过 props 从父组件传递到子组件，子组件通过回调函数与父组件通信，确保数据流动的可预测性。
- 虚拟 DOM：React 通过虚拟 DOM 提高性能，只更新变化的部分，减少直接操作真实 DOM 的开销。
Vue:
- 组件化开发：Vue 同样支持组件化开发，但更倾向于通过模板语法定义组件。
- 响应式系统：Vue 的核心是响应式数据绑定，数据变化会自动更新视图，开发者无需手动操作 DOM。
- 双向数据绑定：Vue 提供了 v-model 指令，支持表单元素与数据的双向绑定，简化了表单处理。
- 渐进式框架：Vue 的设计是渐进式的，可以根据需求逐步引入路由、状态管理等特性。

React:
- JSX 语法：React 使用 JSX（JavaScript XML），允许在 JavaScript 中直接编写类似 HTML 的结构。
```
const MyComponent = () => {
  return <div>Hello, React!</div>;
};
```
- JavaScript 优先：React 强调用 JavaScript 处理逻辑，JSX 只是语法糖，最终会被编译为 JavaScript。
- 手动绑定事件：事件处理需要通过 onClick 等属性手动绑定。
```
<button onClick={() => console.log('Clicked')}>Click Me</button>
```
Vue:
- 模板语法：Vue 使用基于 HTML 的模板语法，支持指令（如 v-if, v-for, v-bind 等）。
```
<div v-if="isVisible">Hello, Vue!</div>
```
- HTML 优先：Vue 的模板语法更接近传统的 HTML，适合熟悉 HTML 的开发者。
- 指令系统：Vue 提供了丰富的指令，简化了 DOM 操作和数据绑定。
```
<input v-model="message" />
<p>{{ message }}</p>
```

React:
- MVC 模式：React 更接近 MVC（Model-View-Controller）模式中的 View 层，专注于 UI 的渲染。
  - Model：数据层，通常由外部状态管理工具（如 Redux、MobX）管理。
  - View：UI 层，由 React 组件负责渲染。
  - Controller：逻辑层，通常由组件的生命周期方法和事件处理函数承担。
- 单向数据流：React 的数据流动是单向的，从父组件到子组件，确保数据流动的可预测性。
Vue:
- MVVM 模式：Vue 更接近 MVVM（Model-View-ViewModel）模式。
  - Model：数据层，由 Vue 的响应式数据系统管理。
  - View：UI 层，由 Vue 的模板语法定义。
  - ViewModel：Vue 实例充当 ViewModel，负责将 Model 和 View 绑定在一起，实现数据的双向绑定。
- 双向数据绑定：Vue 通过 v-model 等指令实现 View 和 Model 的双向绑定，数据变化会自动更新视图，视图变化也会同步到数据。

两者在核心思想、语法与模板、以及设计模式上有显著差异，选择哪个框架取决于项目需求、团队经验和个人偏好。