继上次发帖投票人数只有渺渺五人，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简单的介绍。

欢迎指出我的不足。

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