vue和react 的介绍与对比。

海星吧 16天前 369

继上次发帖投票人数只有渺渺五人,emmm。

或许在里站贴吧发学习贴可能不太合适,不过我尽量把自己的干货拿出来,让有兴趣学习的兄弟们更好的入门框架。

之后的帖就默认各位已经学会了html,css,JavaScript这前端三剑客了。

不会的可以自行在B站学习,网上的文档也很丰厚。

如果有需要我个人也会发点相关的帖,前提是我有兴趣和时间。。。

vue主要是2.6.4版本,虽然现在已经出到3.2了,但是我个人写项目的时候还是用的vue2版本,比较稳定。

react是17版本,也就是react hook,class组件不是很想说,因为react hook出现后,函数式组件感觉比class组件香一些。

好,现在我们来看看一个vue组件和一个react组件的区别。

Vue:

<template>
	<div>
		this is vue component
		<input type="text" v-model="value"/>
		{{value}}
	</div>
</template>

<script>
export default {
	data() {
		return {
			value: ''
		};
	},
};
</script>

React:

import { useState } from "react";
function Page() {
    const [value ,setValue] = useState('');
    return (
        <div>
            this is react component
            <input type="text" value={value} onInput={(e)=>setValue(e.target.value)}/>
            {value}
        </div>
    )
}

上面的代码所展示的效果都是一样的,实现的都是一个输入框写入的数据能够实时绑定在组件内定义的数据上。

vue的做法是使用template,将页面代码和逻辑代码分离的形式,所有的响应数据都放入在data属性定义的函数返回值里,

使用v-model指令绑定数据。

react使用的是jsx语法糖,逻辑和视图都放在一个函数中,使用useState hook创建一个响应的 value,在视图上,用

花括号‘{}’绑定值,使用onChange事件,用setValue将input dom的值写入在之前用hook定义的value上。

可能会有人问为什么vue并没有绑定value就可以使用响应数据,那是因为v-model指令就相当于react的value绑定+onChange事件,

是不是减少了不少的代码量,不过不使用v-model,和react一样使用绑定+事件的处理也是可以的,v-model就相当于是一个语法糖而已。

<template>
	<div>
		this is vue component
		<input type="text" :value="value" @input="setValue"/>
		{{value}}
	</div>
</template>

<script>
export default {
	data() {
		return {
			value: ''
		};
	},
	methods: {
		setValue(e) {
			this.value = e.target.value;
		}
	}
};
</script>

这二者的利弊其实应该在之后的帖中才能体现出来,但其实可以从上面就可以看到,vue虽然有很多语法糖,但是各种东西都必须放在

export default中的对象里,数据放data里,函数放methonds里,各种东西已经给你做好了,你只需要按照它给你的东西敲你的业务

就可以了,不需要你过多的关注数据上的事情。

而react虽然用的函数式组件更加轻便,但是每个数据都必须使用hook创建,改变数据还必须使用hook定义出的set{***}函数,

如果说不是很喜欢繁琐的工作时,react可能会让你感觉不爽。


大概就写到这里,吃饭去了。这篇只是对vue和react简单的介绍。

欢迎指出我的不足。

这里是海星吧,我们下次见,拜拜─=≡Σ(((つ•̀ω•́)つ

 

 

最后于 15天前 被海星吧编辑 ,原因:
弱鸡程序员年底还在加班
最新回复 (11)
  • 喀秋莎 16天前
    0 2
    有H情节吗
    贤者时间看百合番体验更好哦。
  • 海星吧 16天前
    0 3
    喀秋莎 有H情节吗
    没有。
    弱鸡程序员年底还在加班
  • 欧派兽 16天前
    0 4
    奖励三级精华
    1:管理员给你移区后会显示移到了你之前发帖的区。 2:点击我作为楼主发帖时一楼下的图片签名,可以跳转到站规教程贴。 3:多次水贴水回复会封号哦? 4:不知道回什么的时候就点“里世界专属”,一键随机生成几种回复内容。 5:祝你在里世界玩得愉快!
  • 天羽233 15天前
    0 5
    恐怖如斯
    Minecraft玩家
  • 海星吧 15天前
    0 6
    天羽233 恐怖如斯
    你哪儿块斗破大陆来的?
    弱鸡程序员年底还在加班
  • milegewu 15天前
    0 7
    因为看不懂所以不好投票。。
    这个人很懒,什么也没有留下!
  • 2218675712 15天前
    0 8
    下次讲讲关于异步数据处理的呗
    这个人很懒,什么也没有留下!
  • 海星吧 12天前
    0 9
    2218675712 下次讲讲关于异步数据处理的呗
    你是想说async await和promise吗,这个是es6和es8的东西哦。
    但也不难的,可以整一整。
    弱鸡程序员年底还在加班
  • 星辰乄 12天前
    0 10
    现在哪个框架更火一点?话说学习这两个东西指向的岗位是啥,这个算是前端的哪个方向的内容咧?
  • 海星吧 12天前
    1 11
    星辰乄 现在哪个框架更火一点?话说学习这两个东西指向的岗位是啥,这个算是前端的哪个方向的内容咧?
    这两个是前端的框架,国内是vue比较多,react是国外用的比较多,但都会是最好的,
    我已经搞完了react和其周边的一些生态了。
    react ,react-redux,redux-thunk,redux-saga,dvajs ,umijs。
    虽然现在是没有react的项目经验,但是进项目组应该是没问题。
    其实你只要会了其中一个,去看另一个都极其神似。
    弱鸡程序员年底还在加班
  • 海星吧 11天前
    0 12
    2218675712 下次讲讲关于异步数据处理的呗

    ECMAScript 6 入门 阮一峰
    其实看文档就很好了,这个地方讲的很详细。

    弱鸡程序员年底还在加班
    • ACG里世界
      13
          
返回
发新帖