vue.js与react.js相比较的优势

vue.js的简介

vue.js是一个javascript mvvm库,它是以数据驱动和组件化的思想构建的。我们平时多用js去操作dom,vue.js则是使用了数据绑定驱动来操作dom的,也就是说创建了view和model之间的绑定后,当model数据层发生变化时,view的dom就会发生相应变化。

mvvm即是model-view-viewmodel,model和view之间的衔接交互都是通过viewmodel来实现的。viewmodel就是创建一个vue实例,vue实例是作用于某一个dom元素上的。

DOM Listeners和Data Bindings是实现双向绑定的关键。
从View层看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
从Model层看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。

React框架相比它的优势

react和vue的相似之处:

1.使用虚拟dom

2.提供了响应式和组件化的视图组件

3.关注核心库,伴随于此,有配套的路由和负责处理全局状态管理的库

比较之处:

#性能方面

1.渲染性能

渲染用户界面的时候,dom的操作成本是最高的,那为了尽可能的减少对dom的操作,Vue和React都利用虚拟DOM来实现这一点,但Vue的Virtual DOM实现(一个陷阱的叉子)的权重要轻得多,因此比React的引入开销更少。

Vue 和 React 也提供功能性组件,这些组件因为都是没有声明,没有实例化的,因此会花费更少的开销。当这些都用于关键性能的场景时,Vue 将会更快。

2.更新性能

在react中,当一个组件的状态发生变化时,它将会引起整个组件的子树都进行重新渲染,从这个组件的根部开始。那为了避免子组件不必要的重新渲染,您需要随时使用shouldComponentUpdate,并使用不可变的数据结构。 在Vue中,组件的依赖关系在它的渲染期间被自动跟踪,因此系统准确地知道哪些组件实际上需要重新渲染。这就意味着在更新方面,vue也是快于React

3.开发中

在开发中,Vue 每秒最高处理 10 帧,而 React 每秒最高处理不到 1 帧。这是由于 React 有大量的检查机制,这会让它提供许多有用的警告和错误提示信息。vue在实现这些检查时,也更加密切地关注了性能方面。

#HTML & CSS

在react中,html和css都是通过javascript编写的,所有组件的渲染都需要依靠JSX。JSX是使用xml语法编写javascript的一种语法糖

JSX的渲染功能有以下优势:

(1)你可以使用完整的编程语言javascript来实现你的视图界面

(2)工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的(比如,linting、类型检查、编辑器的自动完成)

在 Vue 中,由于有时需要用这些功能,我们也提供了渲染功能 并且支持了 JSX。然而,对于大多数组件来说,渲染功能是不推荐使用了

vue提供的是在html中写模板,优点如下:

  • 在写模板的过程中,样式风格已定并涉及更少的功能实现。
  • 模板总是会被声明的。
  • 模板中任何 HTML 语法都是有效的。
  • 阅读起来更贴合英语(比如,for each item in items)。
  • 不需要高级版本的 JavaScript 语法,来增加可读性

css的组件作用域

除非你把组件分布在多个文件上(例如 CSS Modules),要不在 React 中作用域内的 CSS 就会产生警告。非常简单的 CSS 还可以工作,但是稍微复杂点的,比如悬停状态、媒体查询、伪类选择符等要么通过沉重的依赖来重做要么就直接不能用。

而 Vue 可以让你在每个单文件组件中完全访问 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 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的

React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣

最后,Vue 提供了Vue-cli 脚手架,能让你非常容易地构建项目,包含了 WebpackBrowserify, 甚至 no build system。React 在这方面也提供了create-react-app,但是现在还存在一些局限性:

  • 它不允许在项目生成时进行任何配置,而 Vue 支持 Yeoman-like 定制。
  • 它只提供一个构建单页面应用的单一模板,而 Vue 提供了各种用途的模板。
  • 它不能用用户自建的模板构建项目,而自建模板对企业环境下预先建立协议是特别有用的。

向下扩展

react学习需要你知道JSX和ES2015,vue使用比较简单,只需要引用<script src="https://unpkg.com/vue/dist/vue.js"></script>就可以使用了,生产环境时替换成min版的即可

看vue.js官网时的记录:原文链接:http://cn.vuejs.org/v2/guide/comparison.html

时间: 2024-10-08 11:29:54

vue.js与react.js相比较的优势的相关文章

Angular.js、React.js整合

必备知识 Requirejs.Angularjs.Reactjs,可查看本博客写的相关内容进行必备知识了解. 整合Angular.js.React.js 本人在angular.js之爱恨情仇中已提到过Angular.js的性能问题,而React.js基于virtual dom的方式渲染页面,在性能上有不错的表现,所以在系统中整合了React.js. Requirejs配置 requirejs.config({ baseUrl: '/', paths: { 'jquery': 'libs/jque

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js 概念摘录

转自:http://www.cnblogs.com/xishuai/p/mvc-mvp-mvvm-angularjs-knockoutjs-backbonejs-reactjs-emberjs-avalonjs.html MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Contro

Node.js 之react.js组件-JSX简介

JSX 简介 const element = <h1>Hello, world!</h1>; 以上为一个JSX,我的理解(简单理解带有HTML标签的变量元素). 简介:是一个 JavaScript 的语法扩展.我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式.JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能. JSX 可以生成 React “元素”. 为什么使用 JSX? React 认为渲染逻辑本

Node.js 之react.js组件-Props应用

render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码(个人理解:将组件进行函数化,通过调用组件名实现,组件的利用,以元素的形式调用,并渲染画面) 具有 render prop 的组件接受一个函数,该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑. 具体实例(代码来自官网):URL:https://zh-hans.reactjs.org/docs/render-props.html#___gatsby 笔记:代码中实现的组件调用,是将一个组

Vue.js与React的全面对比

Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两个框架的认知. 1.数据绑定 1.1 Vue中有关数据绑定的部分 vue是双向绑定, Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据.这是通过设置属性

Angular、React.js 和Node.js到底选谁?

为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情,但在这种情况下,对于到底应该选择哪种框架,程序员之间并没有一致的意见,每个人都有不同的想法,并且听起来都相当合理. 为了让一切归于和谐,本文就来探究一下这三大框架各自的优缺点. 基础知识部分: 在我们深入研究这三种框架的具体细节之前,先来了解一些前情提要.yigouyul22.com xucaiz

基于 React.js + Redux + Bootstrap 的 Ruby China 示例

最近在学习前端的各大流行框架, 主要学习了 Vue.js 和 React.js, 前段时间用 Vue.js + uikit 实现了 V2EX 的克隆版本, 最近又用 React.js + redux + bootstrap 实现了 RubyChina 的克隆版本, 两个项目都支持响应式布局. 不得不说这是学习新知识的一个有效途径. 这两个项目都比较合适学习 Vue.js 和 React.js 的朋友参考. Vue.js + V2EX 项目 代码地址: https://github.com/liu

前端迷思与React.js

前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这种戏剧性的变化持续了近 6 年. 自 2013 年 5 月推出以来,ReactJS 在过去三年中已成为了 Web 开发领域的中坚力量. 任何组件与框架都有它的适用场景, 我们应该冷静分析与权衡, 先来看React.js 1 从功能开发角度说,React的思路很好.2 从页面设计角度说,传统的HTML

要不要使用React JS呢 - Angular与ReactJS的整合

MVC(Model - View - Controller)模式无论是Web开发中的前端还是后端都是比较流行的模式,ReactJS位于前端MVC模式中的View层,最多有点Controller层的特性,相当于Javascript编写的Html模板.而Data Model和Data Binding是Angular的优势,所以需要Angular与ReactJS整合.不过Flux是适应ReactJS的数据绑定需求出现的一个库,支持单向数据绑定,https://facebook.github.io/fl