vue+react笔记

Vue
├── Vue2
│ ├── 核心特性
│ │ ├── 响应式系统：Object.defineProperty
│ │ ├── 组件定义：Options API（data、methods、computed、watch等）
│ │ ├── 生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
│ │ ├── 模板与渲染：模板语法、支持render函数、过滤器（filters）
│ │ └── 状态管理：Vuex（state、mutations、actions、getters、modules）
│ └── 其他特性
│ ├── 组件通信：props、$emit、$parent/$children、provide/inject
│ ├── 指令：v-if、v-for、v-bind、v-on等，带事件/按键修饰符
│ └── 自定义指令：Vue.directive注册
└── Vue3
├── 核心特性
│ ├── 响应式系统：Proxy
│ ├── 组件定义：Composition API（setup函数）、保留Options API兼容
│ ├── 生命周期：重命名为onXXX（如onMounted、onUpdated），在setup中使用
│ ├── 模板与渲染：多根节点、v-model简化、v-for与v-if优先级调整
│ └── 状态管理：Pinia（替代Vuex，无mutations，支持多store）
└── 其他特性
├── 组件通信：props/emits更明确、provide/inject跨层级
├── 新组件：Teleport（内容传送）、Suspense（异步加载）
├── 类型支持：更好的TypeScript支持
└── 移除特性：过滤器（推荐计算属性替代）

React
├── 组件类型
│ ├── 类组件
│ │ ├── 状态管理：this.state、this.setState()
│ │ ├── 生命周期：挂载（ComponentDidMount）、更新（ComponentDidUpdate）、卸载（componentWillUnmount）
│ │ ├── 属性与事件：this.props、事件需绑定this（如this.handleClick.bind(this)）
│ │ └── Refs 操作：React.createRef
│ └── 函数组件
│ ├── 状态管理：useState
│ ├── 副作用与生命周期替代：useEffect
│ ├── 属性与事件：直接使用props、无需担心this指向
│ ├── Refs 操作：useRef
│ └── 性能优化：React.memo、useMemo、useCallback
├── 核心 API
│ ├── 元素创建：createElement、cloneElement、createFactory
│ └── 类型判断：isValidElement
├── 状态管理
│ ├── 类组件：自身state管理
│ ├── 函数组件：useState、useReducer
│ └── 全局状态：可结合第三方库（如Redux等）
└── 其他特性
├── 组件通信：props、事件（类组件$emit类似逻辑）、Context（useContext）
└── 模板与渲染：支持JSX、render函数
------------------------------------------------------------------