React和Vue是最主流的两个前端框架。最近面试总是被问到React和Vue的异同点。这一次，我将粗略地整理一下。GitHub上Star对比截图设计思路React官网介绍React是一个用于构建用户界面的JavaScript库。React推荐JSX+内联样式，也就是把HTML和CSS全部写进JavaScript，也就是“allinjs”，HTML和CSS都可以放到js里。React提倡函数式编程，推荐使用纯函数、不可变数据、单向数据流，但可以手动编写onChange等事件处理函数，实现双向数据流。结合JSX轻松实现渲染模板Vue官网介绍Vue是一个用于构建用户界面的渐进式框架。与其他大型框架不同，Vue被设计为从下到上逐层应用。Vue保留了html、css、js的分离写法，让现有的前端开发者在开发时可以保持原有的习惯，更接近于常见的web开发方式。模板是普通的html，数据绑定使用mustache风格，样式直接使用css。Vue认为数据是可变的，使用v-model实现双向数据流。构建和调试*构建工具React创建新单页应用程序的最佳方式：创建ReactAppnpxcreate-react-appmy-appcdmy-appnpmstartVue官方构建工具：vue-clinpminstall-g@vue/clivuecreatemy-appnpmrunserve#ORyarnglobaladd@vue/clivuecreatemy-appnpmrunserve*调试ReactDeveloperTools用于调试reactReduxDevTools用于调试reduxVue.jsdevtools用于调试vue、vuex和其他JSX与模板React没有模板，通过类组件的render方法的返回值或者函数组件的返回值来渲染虚拟DOM，通过原生js实现条件渲染、循环渲染、插值等。你也可以使用JSX语法糖来更简单地描述树结构；Vue使用模板，更接近HTML，js代码和css代码分离，使用mustache进行数据绑定，使用指令实现条件渲染和循环渲染等数据变化监听*数据流对比React是单向数据flow，并且不允许子组件修改父组件发送的props，组件的状态是允许修改的，可以通过setState（异步）来改变。允许通过this.state直接改变组件的状态。在vue2.x中，不允许子组件修改父组件传递的props。组件和DOM的双向绑定可以通过v-model*监听数据变化的方式来类比React组件。调用setState后，默认由于shouldComponentUpdate()的返回值为true，所以所有组件都会重新渲染，导致很多不必要的渲染。可以在组件的shouldComponentUpdate()生命周期方法中优化渲染或者直接使用官方的PureComponent（shouldComponentUpdate()进行state和properties浅比较决定是否渲染）在Vue2.x中，data中的所有properties对象通过Object.defineProperty()添加到vm。对于添加到vm的每个属性，指定一个getter/setter。操作（读/写）getter/setter内部数据中的相应属性。Vue3使用newProxy()和Reflect来指定数据的getter/setter。当设置数据时，会触发对应的setter方法，进而触发vm的watcher方法，然后数据发生变化，vm进一步触发视图更新操作。Vue可以更准确地知道数据的变化，并且只重新渲染与变化的数据绑定的DOM事件。React通过属性绑定事件。React类组件需要手动处理这个事件指向的问题。classDemoextendsReact.Component{/*通过onXxx属性指定事件处理函数（注意大写）a.React使用自定义（合成）事件而不是原生DOM事件——————为了更好的兼容性b.React中的事件是通过事件委托处理（委托给组件的最外层元素）————————为了高效*/constructor(props){super(props);//初始化状态this.state={number:22}//解决this指向问题this.showInfo3=this.showInfo3.bind(this)}showInfo1=()=>{console.log(this.state);}showInfo2=(e,number)=>{控制台。日志（数字）；console.log(this.state);}showInfo3(){console.log(this.state);}showInfo4（数字）{返回（e)=>{console.log(number);console.log(this.state);}}render(){return(
