• Vue.js和React哪个比较好?
  • 发布于 2个月前
  • 320 热度
    7 评论
  • 金龙鱼
  • 8 粉丝 35 篇博客
  •   
最近公司在对前端框架进行选型,初步决定在Vue.js,React和AngularJS三个框架中选择一个,当然,领导还是比较偏向喜欢Vue.js和React这两种框架,那么我想问的是,Vue.js和React各有什么优缺点?用于商业开发的话Vue.js和React哪个比较好?
用户评论
  • 石梁发
  •     如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue
        如果你喜欢简单和“能用就行”的东西,请使用Vue
        如果你的应用需要尽可能的小和快,请使用Vue
        如果你计划构建一个大型应用程序,请使用React
        如果你想要一个同时适用于Web端和原生App的框架,请选择React
        如果你想要最大的生态圈,请使用React
        如果你已经对其中一个用得满意了,就没有必要换了
  • 2018/5/13 0:19:00 [ 1 ] [ 0 ] 回复
  • 马赛克
  • 没用过vue,不好做评价,有机会去尝试一下。说说我用react的感受。前期上手难,难在哪里?

    1、反人类的写法(共识)

    2、设计的技术栈太多,入手茫然。

    3、初学react那会,还是年初的时候,那时候教程明显不足,现在好多了,很多坑都已经有了答案可寻。

    后期维护容易。

    1、单纯的react,很难做到工程化的管理,结合了redux使用之后,就形成了一个规范,有迹可循了。

    2、框架搭好后,开发起来非常轻松,虽然操作表单的数据的时候,没有双向绑定这么好用,但是多写几行代码并不会让我不开心。

    我对vue的感觉

    1、前几天曾在vue社区发帖问了下vue的工程化技术栈是什么,一百多人浏览,没有一个人回答,有点小失望,讨论这么不热烈啊,我只是想知道vue工程化的技术栈实践,不要什么todoList的小demo。

    2、至少是国人开发出来的好东西,思路上还是能让本国人能够轻松点理解。

    3大马车你追我赶,这是很好的现象,说明前端界很活跃,能增加更多的就业需求啊。


  • 2018/5/13 0:17:00 [ 0 ] [ 0 ] 回复
  • 雷布斯
  • 正在帮朋友的一个项目以及自己手头的一个项目整体迁移react,vue在我目前的项目中已经有中大型项目在用,后续做一下回答。先简单说一下这两者的相似以及不同吧:

    相似:其实都是model driven思想的严格践行者,以及通过component拆分完整整个系统的分治

    不同

    1.react基本上已经有一套遵循Flux的完整开发方案(基本上也就这一套大家默认的方式),而vue虽然有配合vuex使用,但是还有其他很多组织方式来解决,所以并不算是有固定模式,相对灵活很多,当然这个你可以看作是优势,也可以看作是不足

    2.react社区还是要比vue大很多

    3.react在view层侵入性还是要比vue大很多的

    4.首次渲染性能,对于大量数据来说react还是比vue有优势

    5.对于component的写法,react偏向于all in js,语法学习上需要下一些功夫,而vue配合vue-loader,其实在很大程度上让你不会觉得陌生--这不就是web component么。


  • 2018/5/13 0:14:00 [ 0 ] [ 0 ] 回复
  • Merlin
  • 出 React 入 Vue.js 的来说下。vue2 出来以后,不管在易用性,功能,性能,文档,配套设施,我都更倾向 vue,特别是 vue 的文档,写得如行云流水般,看得令人赏心悦目。react 由于没有双向绑定,在处理一些需要复杂表单逻辑的时候,很不方便,不管是官方推荐的 flux 架构,以及官方文档中提提到自己实现双向绑定的方案,并没有很好解决这个问题,到头来,都难以需要自己操作 dom。我觉使用 vue 则会省心很多。选择一个框架,一个重要因素是社区成熟度,vue 可能目前在社区这方面不够 react 火热,但也处于上升阶段,朝气蓬勃!特别是国内,中文资料跟进非常及时。强烈推荐题主用 vue!


  • 2018/5/13 0:10:00 [ 0 ] [ 0 ] 回复
  • 王大锤
  • 在超大量数据的首屏渲染速度上,React 有一定优势,因为 Vue 的渲染机制启动时候要做的工作比较多,而且 React 支持服务端渲染。需要指出的一点:React 的 Virtual DOM 也不是不需要优化的。复杂的应用里你有两个选择 1. 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render;2. Components 尽可能都用 pureRenderMixin,然后采用 Flux 结构 + Immutable.js。其实也不是那么简单的。相比之下,Vue 由于采用依赖追踪,默认就是优化状态:你动了多少数据,就触发多少更新,不多也不少。

  • 2018/5/13 0:08:00 [ 0 ] [ 0 ] 回复
  • 泪水的诉求
  • React 和 Vue 有许多相似之处,它们都有:
    1.使用 Virtual DOM
    2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
    3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。

    由于有着众多的相似处,我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性,同时也兼顾了平衡的考量。我们需要承认 React 比 Vue 更好的地方,比如更丰富的生态系统。


    我们可以从以下几个方面对Vue.js和React进行比较:


    运行时性能

    React 和 Vue 都是非常快的,所以速度并不是在它们之中做选择的决定性因素。


    优化
    在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。
    如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用 PureComponent,或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。
    然而,使用 PureComponent 和 shouldComponentUpdate 时,需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。
    在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate,并且没有上述的子树问题限制。

    Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身。


    HTML & CSS
    在 React 中,一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达,现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点,但也存在一些不是每个开发者都能接受的取舍。

    Vue 的整体思想是拥抱经典的 Web 技术,并在其上进行扩展。我们下面会详细分析一下。


    JSX vs Templates

    在 React 中,所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。
    使用 JSX 的渲染函数有下面这些优势
    你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。
    开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如,linting、类型检查、编辑器的自动完成)。
    事实上 Vue 也提供了渲染函数,甚至支持 JSX。然而,我们默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板,这也带来了一些特有的优势:
    对于很多习惯了 HTML 的开发者来说,模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分,但如果这种区别会导致开发效率的提升,那么它就有客观的价值存在。
    基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。
    这也使得设计师和新人开发者更容易理解和参与到项目中。
    你甚至可以使用其他模板预处理器,比如 Pug 来书写 Vue 的模板。
    有些开发者认为模板意味着需要学习额外的 DSL (Domain-Specific Language 领域特定语言) 才能进行开发——我们认为这种区别是比较肤浅的。首先,JSX 并不是免费的——它是基于 JS 之上的一套额外语法,因此也有它自己的学习成本。同时,正如同熟悉 JS 的人学习 JSX 会很容易一样,熟悉 HTML 的人学习 Vue 的模板语法也是很容易的。最后,DSL 的存在使得我们可以让开发者用更少的代码做更多的事,比如 v-on 的各种修饰符,在 JSX 中实现对应的功能会需要多得多的代码。

    更抽象一点来看,我们可以把组件区分为两类:一类是偏视图表现的 (presentational),一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板,在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化,但整体来说我们发现表现类的组件远远多于逻辑类组件。


    组件作用域内的 CSS
    除非你把组件分布在多个文件上 (例如 CSS Modules),CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion)。这引入了一个新的面向组件的样式范例,它和普通的 CSS 撰写过程是有区别的。另外,虽然在构建时将 CSS 提取到一个单独的样式表是支持的,但 bundle 里通常还是需要一个运行时程序来让这些样式生效。当你能够利用 JavaScript 灵活处理样式的同时,也需要权衡 bundle 的尺寸和运行时的开销。
    如果你是一个 CSS-in-JS 的爱好者,许多主流的 CSS-in-JS 库也都支持 Vue (比如 styled-components-vue 和 vue-emotion)。这里 React 和 Vue 主要的区别是,Vue 设置样式的默认方法是单文件组件里类似 style 的标签。
    单文件组件让你可以在同一个文件里完全控制 CSS,将其作为组件代码的一部分。
    <style scoped>
      @media (min-width: 250px) {
        .list-container:hover {
          background: orange;
        }
      }
    </style>
    这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。
    最后,Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader,你可以使用任意预处理器、后处理器,甚至深度集成 CSS Modules——全部都在 <style> 标签内。
    规模

    向上扩展
    Vue 和 React 都提供了强大的路由来应对大型应用。React 社区在状态管理方面非常有创新精神 (比如 Flux、Redux),而这些状态管理模式甚至 Redux 本身也可以非常容易的集成在 Vue 应用中。实际上,Vue 更进一步地采用了这种模式 (Vuex),更加深入集成 Vue 的状态管理解决方案 Vuex 相信能为你带来更好的开发体验。
    两者另一个重要差异是,Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。
    最后,Vue 提供了 Vue-cli 脚手架,能让你非常容易地构建项目,包含了 Webpack,Browserify,甚至 no build system。React 在这方面也提供了 create-react-app,但是现在还存在一些局限性:
    1.它不允许在项目生成时进行任何配置,而 Vue 支持 Yeoman-like 定制。
    2.它只提供一个构建单页面应用的单一模板,而 Vue 提供了各种用途的模板。
    3.它不能用用户自建的模板构建项目,而自建模板对企业环境下预先建立协议是特别有用的。

    而要注意的是这些限制是故意设计的,这有它的优势。例如,如果你的项目需求非常简单,你就不需要自定义生成过程。你能把它作为一个依赖来更新。如果阅读更多关于不同的设计理念。


    向下扩展
    React 学习曲线陡峭,在你开始学 React 前,你需要知道 JSX 和 ES2015,因为许多示例用的是这些语法。你需要学习构建系统,虽然你在技术上可以用 Babel 来实时编译代码,但是这并不推荐用于生产环境。
    就像 Vue 向上扩展好比 React 一样,Vue 向下扩展后就类似于 jQuery。你只要把如下标签放到页面就可以运行:
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    然后你就可以编写 Vue 代码并应用到生产中,你只要用 min 版 Vue 文件替换掉就不用担心其他的性能问题。

    由于起步阶段不需学 JSX,ES2015 以及构建系统,所以开发者只需不到一天的时间阅读指南就可以建立简单的应用程序。


    原生渲染
    React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发,对开发者是非常棒的。相应地,Vue 和 Weex 会进行官方合作,Weex 是阿里巴巴发起的跨平台用户界面开发框架,同时也正在 Apache 基金会进行项目孵化,Weex 允许你使用 Vue 语法开发不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用的组件。
    在现在,Weex 还在积极发展,成熟度也不能和 React Native 相抗衡。但是,Weex 的发展是由世界上最大的电子商务企业的需求在驱动,Vue 团队也会和 Weex 团队积极合作确保为开发者带来良好的开发体验。

    另一个 Vue 的开发者们很快就会拥有的选项是 NativeScript,这是一个社区驱动的插件。


    MobX
    Mobx 在 React 社区很流行,实际上在 Vue 也采用了几乎相同的反应系统。在有限程度上,React + Mobx 也可以被认为是更繁琐的 Vue,所以如果你习惯组合使用它们,那么选择 Vue 会更合理。
  • 2018/5/13 0:04:00 [ 0 ] [ 0 ] 回复
  • AUX
  • Vue.js和React都挺好的,都是响应式的高效JavaScript框架,用于商业开发的话主要看你们公司的技术储备咯,如果有人会Vue.js那就用Vue.js,反之则用React呗。
  • 2018/5/12 23:30:00 [ 1 ] [ 0 ] 回复