Vue和React的区别

Vue:
Vue是一个用于Web构建的UI的渐进式框架。"渐进式框架"和"自底向上增量开发的设计"是Vue开发的两个概念。
特点:易用,使用成本低;灵活,生态系统完善。
React:
React主张函数式编程的理念,实现前端界面的高性能高效率开发,React擅长处理组件化页面。在React中,所有的组件渲染功能依靠JSX,JSX是JavaScript的语法扩展(jsx==js+xml),在创建UI组件和调试时非常简单有用。

一. 共同点:
1. 数据驱动视图。
2. 组件化。
3. 都使用 Virtual DOM + Diff 算法。

二. 不同点:

  1. 核心思想不同:
    Vue定位是尽可能的降低前端开发门槛,让更多人能够更快地上手开发。灵活易用的渐进式框架,进行数据拦截/代理,对侦测数据的变化更敏感/更精确。
    React定位是提出UI开发的新思路。推崇函数式编程(纯组件),数据不可变以及单向数据流。当需要用到双向数据流的时候手动实现(onChange和setState)。

  2. 相应式原理不同:
    Vue依赖收集,自动优化,数据可变。递归监听data的所有属性,直接修改。当数据发生改变时,自动找到引用组件重新渲染。
    React基于状态机,手动优化,数据不可变,需要使用 setState驱动新的state替换老的state。当数据改变时, 以组件为根目录,默认全部重新渲染,所以React中会需要 shouldComponentUpdate这个生命周期函数方法来进行控 制。

  3. 组件写法差异:
    React推荐的是JSX + inline style,也就是把HTML和CSS全部写进JavaScript中,即all in js;
    Vue推荐的是template的单文件组件格式(简单易懂,从传统前端转过来易于理解),即html,css,js都写在同一个文件里(Vue也是支持JSX写法的)。
    这个差异在一定程度上也是由于二者的核心思想不同而导致的。

  4. diff算法:
    Vue对比节点。当节点元素相同,但是className不同,认为是不同类型的元素,删除重建。而React认为是同类型节点,只是修改节点的属性。
    Vue的列表对比,采用的是两端到中间对比的方式,而React采用的是从左到右依次对比的方式。
    当一个集合只是把最后一个节点移到了第一个,React会把前面的节点依次移动,而Vue只会把最后一个节点移到第一个。总体来说,Vue的方式比较高效。

  5. 渲染过程:
    Vue可以更快的计算出Virtual DOM的差异,这是因为它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
    React在应用的状态被改变时,全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期函数方法可以进行控制,但Vue将此视为默认的优化。
    如果应用中交互复杂,需要处理大量的UI变化,那么使用Virtual DOM是一个好主意。如果更新元素并不频繁,那么Virtual DOM并不一定适用,性能很可能还不如直接操控DOM。

  6. vuex和redux:
    从表面来说,store注入和使用方式有一些区别。
    在Vuex中,\(store被直接注入到了组件实例中,因此可以比较灵活的使用:使用dispatch,commit提交更新,通过mapState或者直接通过this.\)store来读取数据。
    在Redux中,我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来。另外,Vuex更加灵活一些,组件中即可以dispatch action,也可以commit updates,而Redux中之只能进行dispatch,不能直接调用reducer进行修改。
    从实现原理上来说,最大的区别有两点:
    Redux使用的是不可变数据,而Vuex的数据是可变的,因此,Redux每次都是用新的state替换旧的state,而Vuex是直接修改。
    Redux在检测数据变化的时候,是通过Diff的方式比较差异的,而Vuex其实和Vue的原理一样,是通过getter/setter来比较的。
    这两点的区别也是因为React和Vue的设计理念不同。React更偏向于构建稳定大型的应用,非常的科班化。相比之下,Vue更偏向于简单快速的解决问题,更灵活,不那么严格遵循条条框框。因此也会给人一种大型项目用React,小型项目用Vue的感觉。

  7. 框架:
    Vue的本质是MVVM框架,从MVC发展而来。
    React是前端组件化框架,从后端组件化发展而来。

三. 语法区别

  1. 路由
  2. 循环:
    Vue循环dom是在html里面使用 v-for 指令来进行循环。
    React是使用
    {数组.map((循环出来的数据,下表)=>{})}
    来进行循环。
  3. 跨域:
    Vue 写在 vue.config.js 里面。
    React 写在 package.json 里面,也可以写在src文件夹下的 setupProxy.js 里面。

四. react和vue的选择

Vue:
1. 最新文档和更简单的语法
2. 更小,更快,更灵活
3. 需要丰富的HTML模板,易于开发。
React:
1. 需要构建移动应用程序
2. 需要构建大型应用程序。
3. 轻量级,易于版本迁移。

posted @ 2023-02-11 18:03  ·灯  阅读(203)  评论(0编辑  收藏  举报