前言
之前一直在用Vue2做项目，近段时间看vue3用起来挺方便，就把之前学习Vue2的几个小案例用Vue3实现了一遍，希望能帮到大家更好的学习和了解Vue3，如果发现文章写得不好，或者有什么建议！欢迎大家指点迷津！
首先要了解Vue2和Vue3的区别，比如：
1、3.0去掉了filter, 没有有beforeCreate created,用setup取代
2、setup里没有this
3、响应式不区分数组和对象
4、新增Composition API，更好的逻辑复用和代码组织
其次要了解Vue3中常用的函数：
1、setup 函数，可以代替Vue2中的data和method属性,直接把逻辑加在setup中
2、reactive 用于为对象添加响应式状态（获取数据值的时候直接获取，不需要加.value，参数只能传入对象类型）
3、ref 用于为数据添加响应式状态（由于reactive只能传入对象类型的参数，而对于基本数据类型要添加响应式状态就只能用ref）
4、toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。接收两个参数：源响应式对象和属性名，返回一个ref数据
4、toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref
下面就是最简单的小案例
1、简单计算器功能
计算器功能很简单的，只需要两个输入框，第一个输入框代表输入的第一个数字、第二个输入框代表输入的第二个数字，如果你没有输入数字或者只输入一个就直接点击 加减 这些按钮就给出提示
代码如下：
<head>
<title>Vue3 计算器</title>
</head>
<body>
<div id = "app" style = "text-align:center;">
<h1>计算结果：{{numCount}}</h1>
<div>
第一个数字：<input type="number" v-model="form.num1"/>
</div>
<div style="margin:10px">
第二个数字：<input type="number" v-model="form.num2"/>
</div>
<div>
<button @click="MCK('加')">加</button>
<button @click="MCK('减')">减</button>
<button @click="MCK('乘')">乘</button>
<button @click="MCK('除')">除</button>
<button @click="MCK('清空')">清空</button>
</div>
</div>
<script type = "text/javascript">
const { createApp, ref, reactive, watch,toRefs } = Vue
const state = reactive({
numCount:0,
form:{
num1:'',
num2:'',
}
})
const MCK = (val) => {
if(state.form.num1 && state.form.num2){
switch(val){
case '加':
state.numCount = parseInt(state.form.num1) + parseInt(state.form.num2)
break;
case '减':
state.numCount = parseInt(state.form.num1) - parseInt(state.form.num2)
break;
case '乘':
state.numCount = parseInt(state.form.num1) * parseInt(state.form.num2)
break;
case '除':
state.numCount = parseInt(state.form.num1)/ parseInt(state.form.num2)
break;
case '清空':
state.numCount = 0
state.form.num1 = ''
state.form.num2 = ''
break;
}
}else{
alert('请输入数字')
}
}
const app = {
setup() {
return {
...toRefs(state),
MCK
}
}
}
createApp(app).mount('#app')
</script>
</body>
</html>
2、日记本功能
日记本功能也很简单，首先你要在输入框v-model绑定一个字符串、然后每次输入后点击回车按钮做一些判断，判断改输入框绑定字符串是否为空，如果为空就提示输入、反之把该字符串push到数组中，如果你想删除其中某一项，在点击删除按钮时传入该项的索引然后在数组中删除指定位置元素
<html>
<head>
<title>Vue3 小目标日记本</title>
https://unpkg.com/vue@next">
</head>
<body>
<div id = "app" style = "text-align:center;">
<h1>小目标列表</h1>
<ul v-for="(item,index) in addList" :key="index">
<ol>
{{item}}
<a style="color:red;margin:15px;cursor:pointer" @click="delBtn(index)">删除</a>
</ol>
</ul>
<input type="text" v-model="message" @keyup.enter="add" placeholder="输入小目标后，按回车确认"/>
<h2>共有{{addList.length}}个小目标</h2>
</div>
<script type = "text/javascript">
const { createApp, ref, reactive, watch,toRefs } = Vue
const message = ref('')
const state = reactive({
addList:[]
})
const add = () => {
if(message.value){
state.addList.push(message.value)
message.value = ''
}else{
alert('没有输入小目标')
}
}
const delBtn = (index) => {
state.addList.splice(index,1)
}
const app = {
setup() {
return {
message,
...toRefs(state),
add,
delBtn
}
}
}
createApp(app).mount('#app')
</script>
</body>
</html>
3、增删查改
增删查改功能就不用说了，看一下就行，数据都是写死的
<html>
<head>
<title>学生增删查改</title>
https://unpkg.com/vue@next">
</head>
<body>
<div id = "app" style = "text-align:center;">
<button @click="detailBtn('add')" v-if="hidden">添加</button>
<table align="center" border cellpadding="10" cellspacing="0" v-if="hidden">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex == 0 ? '男' : '女'}}</td>
<td>
<button @click="detailBtn(item)">修改</button> 
<button @click="delBtn(index)">删除</button>
</td>
</tr>
</table>
<div style="border:1px solid #CCC;margin:70px" v-if="!hidden">
<div>
姓名：<input type="text" v-model="form.name"/>
</div>
<div>
年龄：<input type="number" v-model="form.age"/>
</div>
<div>
性别：<select v-model="form.sex">
<option value = "0">男</option>
<option value = "1">女</option>
</select>
</div>
<div>
<button @click="updateBtn">确定</button> 
<button @click="hidden = true">取消</button>
</div>
</div>
</div>
<script type = "text/javascript">
const { createApp, ref, reactive, watch,toRefs } = Vue
const state = reactive({
hidden:true,
list:[
{id:1,name:'张三',age:18,sex:0},
{id:2,name:'李四',age:23,sex:0},
{id:3,name:'王五',age:25,sex:1},
],
form:{},
id:3
})
const delBtn = (index) => {
state.list.splice(index,1)
}
const detailBtn = (item) => {
state.hidden = false
if(item != 'add'){
state.form.name = item.name
state.form.age = item.age
state.form.sex = item.sex
state.form.id = item.id
state.form.addIsUpdate = 'update'
}else{
state.form = {}
}
}
const updateBtn = () => {
if(state.form.name != '' && state.form.age > 0 && state.form.sex != 2){
if(state.form.addIsUpdate == 'update'){
state.list.forEach((item,index) => {
if(state.form.id == item.id){
item.name = state.form.name
item.age = state.form.age
item.sex = state.form.sex
state.hidden = true
}
})
}else{
state.form.id = ++state.id
state.list.push(state.form)
state.hidden = true
}
state.form = {}
}else{
alert('请正确输入！')
}
}
const app = {
setup() {
return {
...toRefs(state),
delBtn,
detailBtn,
updateBtn
}
}
}
createApp(app).mount('#app')
</script>
</body>
</html>
好了，三个小实例在这里就说完了！内容稍微有点多，但是都是一些基础，只要知道函数怎么用，多加练习一下就没多大问题，基础语法都在这里，只是没有做样式看起来比较丑，给大家推荐一个在线运行工具，大家可以把代码直接复制过去运行在线运行工具。最后还有一句话，如果觉得我哪里写错了，写得不好，欢迎指点！
