尧图网页设计 
目录前言一、vue2 与 react 15 的对比1、vue2 与 react 15 的相同点2、vue2 与 react 15 的不同点1、数据流的不同2、框架本质不同3、模板不同4、组件通信方式不同5、组合不同功能的方式不同6、state 数据的变更方式不同7、监听数据变化的实现原理不同二、vue3 和 react18 对比1、相同点2、不同点前言Vue 由 EvanYou 开发。React 由 由 Facebook 开发。React 版本Vue 版本一、vue2 与 react 15 的对比此时 Vue 和 React 还都没支持 Hooks 语法。1、vue2 与 react 15 的相同点都支持声明式编程。都使用虚拟 DOM只更新那些已经修改的对象从而实现快速渲染。都是支持响应式组件专注于组件化开发将其他功能如路由和全局状态管理等交给相关的库来处理。2、vue2 与 react 15 的不同点1、数据流的不同Vue 双向数据流父子组件之间props 可以双向绑定组件与 DOM 之间可以通过 v-model 双向绑定。React 单向数据流props 自顶向下由外及内。数据在某个节点被改动后只会影响一个方向上的其他节点。将父组件的方法以属性的形式传递给子组件进而操作父组件的属性。2、框架本质不同Vue 采用 MVVM 框架由 MVC 发展而来详情请看 从 MVC 到 MVVM 软件架构。React 既不属于 MVC 也不属于 MVVM 架构。React 是前端组件化框架由后端组件化发展而来。3、模板不同模板的语法不同Vue 采用 SFCsingle-file-component模板系统——组件包括 template、script 和 style 三个模块。将 HTML、CSS 和 JS 分离了。React 采用 JSX 语法。模板的原理不同Vue 是在单独的 template 模板中通过一些列 Vue 指令来实现的。React 是在组件 JS 代码中通过原生 JS 来实现模板的更加原生详见 React 与 DOM。4、组件通信方式不同Vue 中常用的 3 种组件通信的方式具体请看 Vue 组件之间的通信父组件通过 props 向子组件传递数据或者回调虽然可以传递回调但是我们一般只传数据。子组件向父组件发送消息有两种方式事件和回调函数。但 Vue 更倾向于使用事件。可以通过 provide/inject 来实现父组件向子组件注入数据可以跨越多个层级。React 中常用的 3 种组件通信的方式具体请看 React 组件的“组件间的通信”小节父组件通过 props 可以向子组件传递数据或者回调。子组件向父组件发送消息都是使用回调函数的这可能是他们二者最大的区别。可以通过 context 进行跨层级的通信这其实和 provide/inject 起到的作用差不多。5、组合不同功能的方式不同Vue 组合不同功能的方式是通过 mixinvue3 弃用了Vue 中组件是一个被包装的函数并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的比如声明的 props 怎么接收到的这些都是 vue 创建组件实例的时候隐式干的事。由于 vue 默默帮我们做了这么多事所以我们自己如果直接把组件的声明包装一下返回一个 HoC那么这个被包装的组件就无法正常工作了。React 组合不同功能的方式是通过 HoC高阶组件。React 最早也是使用 mixins 的不过后来他们觉得这种方式对组件侵入太强会导致很多问题就弃用了 mixinx 转而使用 HoC。高阶组件本质就是高阶函数React 的组件是一个纯粹的函数所以高阶函数对 React 来说非常简单。6、state 数据的变更方式不同Vue 中 state 对象不是必须的。数据由 data 属性在 vue 对象中管理可以直接通过this.state.属性名来修改 state 对象里的数据。React 中 state 对象是必须的。不能直接修改 state 对象里的数据只能通过 setState() 方法更新 state 对象里的数据。7、监听数据变化的实现原理不同VueVue 通过 getter/setter 以及一些函数的劫持能精确知道数据变化。Vue 可以更快地计算出 Virtual DOM 的差异这是因为 Vue 是以组件为颗粒度的会跟踪每一个组件的依赖关系不需要重新渲染整个组件树。ReactReact 默认是通过比较引用的方式diff进行的如果不优化可能导致大量不必要的 VDOM 的重新渲染。React 默认会重新渲染其全部子组件。当然这也可以通过 shouldComponentUpdate 这个生命周期方法来进行控制但 Vue 将此视为默认的优化。为什么 React 不精确监听数据变化呢这是因为 Vue 和 React 设计理念上的区别Vue 使用的是可变数据。React 更强调数据的不可变。Vue 和 React 的 diff 算法都是进行同层次的比较主要有以下两点不同Vue 对比节点如果节点元素类型相同但是 className 不同认为是不同类型的元素会进行删除重建但是 React 则会认为是同类型的节点只会修改节点属性。Vue 的列表对比采用的是首尾指针法而 react 采用的是从左到右依次比对的方式当一个集合只是把最后一个节点移动到了第一个React 会把前面的节点依次移动而 Vue 只会把最后一个节点移动到最后一个从这点上来说 Vue 的对比方式更加高效。二、vue3 和 react18 对比1、相同点都有组件化思想。都支持服务器端渲染。都有Virtual DOM虚拟dom。数据驱动视图。都有支持native的方案Vue的weex、React的React native。都有自己的构建工具Vue的vue-cli、React的Create React App。都用 hooks 来逻辑复用。都支持 JSX 语法。2、不同点数据流向的不同。react从诞生开始就推崇单向数据流而Vue是双向数据流。数据变化的实现原理不同。react使用的是不可变数据而Vue使用的是可变的数据。组件化通信的不同。react中我们通过使用回调函数来进行通信的而Vue中子组件向父组件传递消息有两种方式事件和回调函数。diff算法不同。react主要使用diff队列保存需要更新哪些DOM得到patch树再统一操作批量更新DOM。Vue 使用双向指针边对比边更新DOM。【参考文章】2022年前端框架趋势React与Vue深度对比React与Vue的区别和对比Vue和React的使用场景和深度有何不同vue和react区别Vue与REACT两个框架的区别和优势对比Vue与React的区别和优势对比思考vue3和react18的区别 Vue 和 React 的对比
目录前言一、vue2 与 react 15 的对比1、vue2 与 react 15 的相同点2、vue2 与 react 15 的不同点1、数据流的不同2、框架本质不同3、模板不同4、组件通信方式不同5、组合不同功能的方式不同6、state 数据的变更方式不同7、监听数据变化的实现原理不同二、vue3 和 react18 对比1、相同点2、不同点前言Vue 由 EvanYou 开发。React 由 由 Facebook 开发。React 版本Vue 版本一、vue2 与 react 15 的对比此时 Vue 和 React 还都没支持 Hooks 语法。1、vue2 与 react 15 的相同点都支持声明式编程。都使用虚拟 DOM只更新那些已经修改的对象从而实现快速渲染。都是支持响应式组件专注于组件化开发将其他功能如路由和全局状态管理等交给相关的库来处理。2、vue2 与 react 15 的不同点1、数据流的不同Vue 双向数据流父子组件之间props 可以双向绑定组件与 DOM 之间可以通过 v-model 双向绑定。React 单向数据流props 自顶向下由外及内。数据在某个节点被改动后只会影响一个方向上的其他节点。将父组件的方法以属性的形式传递给子组件进而操作父组件的属性。2、框架本质不同Vue 采用 MVVM 框架由 MVC 发展而来详情请看 从 MVC 到 MVVM 软件架构。React 既不属于 MVC 也不属于 MVVM 架构。React 是前端组件化框架由后端组件化发展而来。3、模板不同模板的语法不同Vue 采用 SFCsingle-file-component模板系统——组件包括 template、script 和 style 三个模块。将 HTML、CSS 和 JS 分离了。React 采用 JSX 语法。模板的原理不同Vue 是在单独的 template 模板中通过一些列 Vue 指令来实现的。React 是在组件 JS 代码中通过原生 JS 来实现模板的更加原生详见 React 与 DOM。4、组件通信方式不同Vue 中常用的 3 种组件通信的方式具体请看 Vue 组件之间的通信父组件通过 props 向子组件传递数据或者回调虽然可以传递回调但是我们一般只传数据。子组件向父组件发送消息有两种方式事件和回调函数。但 Vue 更倾向于使用事件。可以通过 provide/inject 来实现父组件向子组件注入数据可以跨越多个层级。React 中常用的 3 种组件通信的方式具体请看 React 组件的“组件间的通信”小节父组件通过 props 可以向子组件传递数据或者回调。子组件向父组件发送消息都是使用回调函数的这可能是他们二者最大的区别。可以通过 context 进行跨层级的通信这其实和 provide/inject 起到的作用差不多。5、组合不同功能的方式不同Vue 组合不同功能的方式是通过 mixinvue3 弃用了Vue 中组件是一个被包装的函数并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的比如声明的 props 怎么接收到的这些都是 vue 创建组件实例的时候隐式干的事。由于 vue 默默帮我们做了这么多事所以我们自己如果直接把组件的声明包装一下返回一个 HoC那么这个被包装的组件就无法正常工作了。React 组合不同功能的方式是通过 HoC高阶组件。React 最早也是使用 mixins 的不过后来他们觉得这种方式对组件侵入太强会导致很多问题就弃用了 mixinx 转而使用 HoC。高阶组件本质就是高阶函数React 的组件是一个纯粹的函数所以高阶函数对 React 来说非常简单。6、state 数据的变更方式不同Vue 中 state 对象不是必须的。数据由 data 属性在 vue 对象中管理可以直接通过this.state.属性名来修改 state 对象里的数据。React 中 state 对象是必须的。不能直接修改 state 对象里的数据只能通过 setState() 方法更新 state 对象里的数据。7、监听数据变化的实现原理不同VueVue 通过 getter/setter 以及一些函数的劫持能精确知道数据变化。Vue 可以更快地计算出 Virtual DOM 的差异这是因为 Vue 是以组件为颗粒度的会跟踪每一个组件的依赖关系不需要重新渲染整个组件树。ReactReact 默认是通过比较引用的方式diff进行的如果不优化可能导致大量不必要的 VDOM 的重新渲染。React 默认会重新渲染其全部子组件。当然这也可以通过 shouldComponentUpdate 这个生命周期方法来进行控制但 Vue 将此视为默认的优化。为什么 React 不精确监听数据变化呢这是因为 Vue 和 React 设计理念上的区别Vue 使用的是可变数据。React 更强调数据的不可变。Vue 和 React 的 diff 算法都是进行同层次的比较主要有以下两点不同Vue 对比节点如果节点元素类型相同但是 className 不同认为是不同类型的元素会进行删除重建但是 React 则会认为是同类型的节点只会修改节点属性。Vue 的列表对比采用的是首尾指针法而 react 采用的是从左到右依次比对的方式当一个集合只是把最后一个节点移动到了第一个React 会把前面的节点依次移动而 Vue 只会把最后一个节点移动到最后一个从这点上来说 Vue 的对比方式更加高效。二、vue3 和 react18 对比1、相同点都有组件化思想。都支持服务器端渲染。都有Virtual DOM虚拟dom。数据驱动视图。都有支持native的方案Vue的weex、React的React native。都有自己的构建工具Vue的vue-cli、React的Create React App。都用 hooks 来逻辑复用。都支持 JSX 语法。2、不同点数据流向的不同。react从诞生开始就推崇单向数据流而Vue是双向数据流。数据变化的实现原理不同。react使用的是不可变数据而Vue使用的是可变的数据。组件化通信的不同。react中我们通过使用回调函数来进行通信的而Vue中子组件向父组件传递消息有两种方式事件和回调函数。diff算法不同。react主要使用diff队列保存需要更新哪些DOM得到patch树再统一操作批量更新DOM。Vue 使用双向指针边对比边更新DOM。【参考文章】2022年前端框架趋势React与Vue深度对比React与Vue的区别和对比Vue和React的使用场景和深度有何不同vue和react区别Vue与REACT两个框架的区别和优势对比Vue与React的区别和优势对比思考vue3和react18的区别