VUE2 和 VUE3 区别

自己不是一个前端工作者，由于个人兴趣，学了一些vue，但是今年因为要做一个东西，我创建了一个vue项目，怎么调试不对，查了下才发现自己创建的是vue3项目，所以这里简单记录下区别，以便后续自己查证（由于是个人理解，可能有所欠缺）

首先上官网

vue3中文官网 这里可以查看vue3的一些api，便于我们查证学习

VUE2

一：Options API
什么是Options，英文翻译是选项，实际就是咱们在vue2中用的 data(保存数据用的)，props(父相子传递数据用的)，components(引用组件用的)，computed(对data数据加工用的)，methods(写函数用的)，生命周期函数(beforeCreate //创建前，created //创建后，beforeMount //载入前，mounted //载入后，beforeUpdate //更新前，updated //更新后，beforeDestroy //销毁前，destroyed //销毁后)。
vue2中是把这些给拆分开来的，用尤大的话就是，规范咱们编程的习惯。但是有利有弊，拆分开来也导致了代码可读性变差了(被割裂开了)。比如一个大的界面，data里面定义了上百个数据，在methods中使用函数引用时虽然当时没问题，但是回头再来看代码，就需要来回翻，从而导致了可维护性变差。
二：Mixin (命名空间冲突、逻辑不清、不易复用)
vue3中不再推荐Mixin的使用
三：vue2 对TS支持不充分
vue3对TS是充分支持的，vue2想要支持可能需要一些配置

VUE3

一：Composition API
Composition API 中文官网，这个还是很重要的，个人认为VUE3最重要的就是这块，Composition 实际就是把Options 给整合成了setup，使用了组合式API 和 函数式编程。

代码

由于个人对VUE3了解还有限，所以直接上代码，做一个简单的说明

<template>
  <div class="login">
    <div class="the_header">
			<span class="header_text">权 限 模 拟</span>
		</div>
		<div class="content">
			<div class="login_content">
				<div class="the_title">
					<span>账号登录</span>
				</div>
				<div class="the_account">
					<input type="text" placeholder="请输入用户名" id="the_account" v-model="user">
					<!-- <input type="text" placeholder="请输入用户名" id="the_account" v-model="state.user"> -->
				</div>
				<div class="the_password">
					<input type="text" placeholder="请输入密码" id="the_password" v-model="pw">
					<!-- <input type="text" placeholder="请输入密码" id="the_password" v-model="state.pw"> -->
				</div>
				<span class="the_msg" v-show="msg">非法用户，请确认账号密码</span>
				<!-- <span class="the_msg" v-show="state.msg">非法用户，请确认账号密码</span> -->
				<div class="the_btn" >
					<button id="the_btn" @click="login()">登录</button>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
import rq from '../components/axios_http/axios_http.js';
import {ref,reactive} from 'vue' //引入响应式api
import {useRouter} from 'vue-router';
export default {
  name: 'Login',
	setup(){
		//data star
		const user = ref('');//声明变量
		const pw = ref('');//声明变量
		const msg = ref(false);//声明变量
		//data end
		//以上实际就相当于vue2中data里面的变量声明，ref是为了保证响应
		
		const router = useRouter();//声明路由，为下面路由跳转做准备
		
		//function star
		const hide_msg = ()=>{
			setTimeout(()=>{
				msg.value = !msg.value;
			},2000)
		};	
		const login = ()=>{
			let sql_data = {
				login_id:user.value,
				login_pw:pw.value
			}
			rq.requests.post('login',sql_data).then(res =>{
				if(res.data.per_con >= 1){
					router.push('/HomePage')
				}else{
					msg.value = !msg.value;
					hide_msg();
				}
			})
		}
		//function end   此部分代码实际就相当于vue2中methods中写的函数
		
		//return data function   star
		return{
			user,
			pw,
			msg,
			login
		};
		//return data function   end   此部分将定义的变量数据和函数返回，只有返回的才能够 <template> 中引用
		
		//以下写法能实现同样的功能（利用了reactive对ref的解构）
		/*//官方解构说明 star
		const count = ref(1)
		const obj = reactive({ count })

		// ref 会被解构
		console.log(obj.count === count.value) // true

		// 它会更新 `obj.value`
		count.value++
		console.log(count.value) // 2
		console.log(obj.count) // 2

		// 它也会更新 `count` ref
		obj.count++
		console.log(obj.count) // 3
		console.log(count.value) // 3
		//官方解构说明 end
		*/
		
		/* const state = reactive({
			user:'',
			pw:'',
			msg:false
		})
		
		const router = useRouter();
		
		const hide_msg = ()=>{
			setTimeout(()=>{
				state.msg = !state.msg;
			},2000)
		};	
		const login = ()=>{
			let sql_data = {
				login_id:state.user,
				login_pw:state.pw
			}
			rq.requests.post('login',sql_data).then(res =>{
				if(res.data.per_con >= 1){
					router.push('/HomePage')
				}else{
					state.msg = !state.msg;
					console.log(state.msg)
					hide_msg();
				}
			})
		}
		
		return{
			state,
			login
		}; */
	}
}
</script>
<style scoped="scoped">
	.the_header{ 
		width: 100vw;
		height: 4vh;
		background-color: rgb(42, 53, 77);
		line-height: 4vh;
	}
	.header_text{
		color: white;
		padding-left: 20px;
		font-size: 20px;
	}
	.content{
		width: 100%;
		height: 96vh;
		background-image: url(../assets/login/reg_login.png);
		background-size:100% 100%;
		position: relative;
	}
	.login_content{
		height: 30vh;
		width: 24vw;
		background-color: #FFFFFF;
		border-radius: 15px;
		position: absolute;
		top:25vh;
		left: 38vw;
	}
	.the_account,.the_password,.the_btn{
		margin: 5px 10% 0 10%;
		height: 10%;
		width: 80%;
		margin-top: 5%;
		border: 0rem;
	}
	#the_account,#the_password,#the_btn{
		height: 100%;
		width: 100%;
		border: 1px solid rgb(192, 196, 204);
	}
	input:focus{ 
		outline-color: rgb(64, 158, 255);
	}
	#the_btn{
		background-color: rgb(82, 173, 234);
		color: white;
		border-radius: 5px;
	}
	.the_msg{
		color: red;
		margin-left:10%;
		position: absolute;
		top: 62%;
	}
	.the_title{
		color: rgb(35, 209, 224);
		height: 10%;
		width: 80%;
		font-size: 1.5rem;
		margin: 10% 10% 0 10%;
	}
</style>