vue与react的对比

1、原理

vue:
Object.defineProperty或Object.proxy 数据劫持，监听数据变化，通过渲染函数编译模板，形成虚拟dom，setter,getter更新dom
react:虚拟dom的差异比较，来最小化实际的dom更新次数，从而提高应用的性能和效率

2、编程风格和视图风格

vue：html模板
react：jsx

3、组件、路由、状态管理

vue 复合式Api，vue-router,vuex/pinia
react 类组件或函数式组件，react-router,redux/zustand/mobx

4、响应式、生命周期、副作用

vue new Proxy()，beforeCreate/created()/beforeMount/mounted/beforeUpdate/updated()/beforeDestory/destoryed,watchEffect((cb)=>{cb(()=>{})})
react state管理，constructor/componentDidMount/componentDidUpdate/componentWillUnmount,
useEffect(()=>{return ()=>{}})

5、基础用法对比

5.1 模板对比
vue 指令 + 模板
react js + 模板
5.2 样式对比
vue class,style
react className
5.3 事件对比
vue 事件比较丰富
react onChange
5.4 表单对比
vue 双向绑定v-model
react 表单受控与非受控
受控组件和非受控组件最大的区别在于组件的值是由React状态控制还是Dom节点控制
5.5 通信对比
父子
vue props $parent $children
react props 子组件调用父组件的函数并传值
跨级
vue provide/inject $attrs/$listeners
react context
兄弟
vue eventBus
react 子A -> 父 父 -> 子B
任意组件
mitt

5.6 逻辑复用
vue use函数自定义的钩子函数
react use函数自定义的钩子函数

5.7 内容分发
vue 插槽slot
react props.children

5.8 dom操作
vue: ref
react: ref