Vue React 简单对比

tomorrowwu 发布于2019-08-26 10:47 / 2952人阅读

摘要：单文件直接引入虚拟虚拟区域挂载区域参数值第二个参数值数据驱动数据源初始化，定义在或里在里数据渲染插值渲染支持表达式表达式列表渲染里生成元素集合条件渲染条件渲染动态绑定数据更新重新赋值更新数据指令添加动态切换行间写法事件写法事件处理函

/	Vue	React
单文件直接引入	vue.js	react.js + react-dom.js + babel.js
虚拟DOM	√	√
虚拟DOM区域（挂载区域）	el 参数值	ReactDOM.render() 第二个参数值
数据驱动	√	√
Model数据源	初始化，定义在data:{} 或 data () { return {} }里	在state里 constructor () { this.state = {} }
数据渲染	{{ }} 插值渲染支持表达式	JSX { } 表达式
列表渲染	v-for	JSX里生成元素集合 {this.state.arr.map((item,index)=> {item} )}
条件渲染	v-if	{this.state.show? 条件渲染 : null}
动态绑定	v-bind	title={this.state.title}
数据更新	重新赋值 this.id = xxx;/ this.$set()	this.setState({id:xx}) 更新数据
指令	√	×
添加class	class / :class	className="red"
动态切换class	:class="[show? "class1": "class2"]"	className={this.state.show ? "class1" : "class2"}
style行间	style / :style	JSX写法 style={{color:"pink"}}
ref	√	√
事件写法	@click="clickFn"	onClick={this.clickFn.bind(this)}
事件处理函数	methods: {}里	与render(){} 方法同级
生命周期钩子函数	created() mounted() 等	componentDidMount() componentDidUpdate() 等
创建组件	Vue.component全局 / components:{} 局部	function组件 / class组件
组件定义规则	1.kebab-case (短横线分隔命名) 2.PascalCase （大驼峰式）	为了区分原生标签，组件必须大写
组件特点	.vue文件分html、js、css三块	all in js
数据流向	单向数据流	单向数据流
数据双向绑定	v-model	无（但可以自己实现绑定value值 + onchange事件更新value值）
监听数据变化	watch	getDerivedStateFromProps()
父组件向子组件传值	props传值 - 需要在子组件接收props:["xx"]，然后就可以使用xx值	props传值 - 直接使用this.props.xx 取到值
子组件向父组件传值	子组件this.$emit触发父组件事件	子组件this.props.xx 触发父组件事件
路由	vue-router	react-router
状态管理	vuex	react-redux
修改状态	使用 mutations	使用reducer纯函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106772.html

Vue、React 和 Angular横向比对（数据对比）

摘要：同比与去年同期的同比变化率。我们对调查报告进行分析数据统计时间与本文时间差距较远，数据存在延后。这意味着你可以获得语法高亮，支持以及更容易使用预处理器如或。的是一个类似语法的可选预处理器，并可在中进行编译。一些历史 Angular 是基于 TypeScript 的 Javascript 框架。由 Google 进行开发和维护，它被描述为超级厉害的 JavaScript MVW 框架...

fxp 2019-08-23 14:21 评论0 收藏0
浅谈MVC,MVP,MVVM渐进变化及React与Vue比较

摘要：将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。此示例使用类似的语法，称为。执行更快，因为它在编译为代码后进行了优化。基于的模板使得将已有的应用逐步迁移到更为容易。前言因为没有明确的界定,这里不讨论正确与否,只表达个人对前端MV*架构模式理解看法,再比较React和Vue两种框架不同.写完之后我知道这文章好水,特别是框架对比部分都是别人说烂的,而我也是打算把...

DrizzleX 2019-08-26 10:36 评论0 收藏0
Svelte 前端框架探索

摘要：苗条的框架正是作者的初始目的，苗条包括代码编写量打包大小等等。是已经编译后的组件有什么缺点是一个刚起步不久的前端框架，无论在维护人员还是社区上都是大大不如三大框架，这里列举一下本人认为的存在的缺点。 Svelte 的作者也是 rollup 的作者 Rich Harris，前端界的轮子哥。sevlte 项目首次提交于 2016 年 11 月 16 日，目前版本是 3.6.1（2019-0...

Euphoria 2019-08-23 18:28 评论0 收藏0
珠峰前端架构师培养计划

摘要：公司的招聘要求都提到了至少熟悉其中一种前端框架，有前端工程化与模块化开发实践经验相关字眼。我们主要从端公众号移动端小程序三大平台进行前端的技术选型，并来说说选其技术的几大优势。技术的优势互联网前端大潮后，前端出现了大框架，分别是与。 1、技术选型的背景前端技术发展日新月异，互联网上出现的新型框架也比较多，如何让新招聘的人员...

ccj659 2021-11-22 15:24 评论0 收藏0
React和Vue对比

摘要：首次发表在个人博客相同点都支持服务器端渲染都有组件化开发通过参数进行父子组件数据的传递都实现规范数据驱动视图都有支持的方案的的不同点严格上只针对的层则是模式不一样会跟踪每一个组件的依赖关系不需要重新渲染整个组件树而对于而言每当应用的状 showImg(http://upload-images.jianshu.io/upload_images/3297464-3aa21898fa4fa0...

davidac 2019-08-22 11:21 评论0 收藏0