相同
1. 组件化
2. Virtual DOM + Diff算法
渲染流程
都要设置key
在处理老节点部分，都需要把节点处理 key - value 的 Map 数据结构，方便在往后的比对中可以快速通过节点的 key 取到对应的节点。同样在比对两个新老节点是否相同时，key 是否相同也是非常重要的判断标准。所以不同是 React, 还是 Vue，在写动态列表的时候，都需要设置一个唯一值 key，这样在 diff 算法处理的时候性能才最大化。
3. 数据驱动视图
不同
| vue | react | |
|---|---|---|
| 组件语法 | template | jsx |
| 动态渲染 | v-if/v-show | &&/三元运算符 |
| 双向绑定 | v-model | 对input绑定change事件，更新state |
| 状态控制 | useRef()/useReactive() （ref需要.value获取，自动更改状态） | useState() （需要set方法手动更新状态） |
| 状态监控 | watchEffect() （watch()不能初始化时执行） | useEffect()（需要在第二个参数写上依赖） |
| 依赖收集 | watchEffect()/computed()都是自动收集依赖 | useEffect()/useMemo()/useCallBack()需要在第二个参数写上依赖 |
| 组件挂载时执行 | onBeforeMounted()/onMounted() | useEffect() (第二个参数为空数组) |
| 状态更新时执行 | onUpdated()/onBeforeUpdate() | useEffect() (没有第二个参数) |
| 组件销毁时执行 | onBeforeUnmounted()/onUnMounted() | useEffect() 第一个函数参数内返回一个函数 |
| Props | defineProps() | 函数组件参数 |
| 计算属性 | computed() | useState() （参数为回调函数） |
| 获取dom | ref() | useRef() |
| 子组件传递 | slot | props.children |
| 跨组件通信 | provide/inject | Context |
| 状态管理工具 | Vuex/Pinia | Redux/Mobx... |
