【Vue3.0实战逐步深入系列】利用setup+ref+computed实现一个简单不能再简单的投票功能

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】

前言

小伙伴们大家好。在前面一篇文章中我们学习了vue3.0中组合式API的使用，组合式API能够给我们带来的好处以及组合式API中一些常用的方法等。但是整篇文章下来感觉知识点有点散，对于没有vue基础的小伙伴来说可能只知道有这么个知识点，但是具体怎么使用还是不太理解。接下来我们就从零开始实现一个超级简单的投票功能，目的是学以致用，把零散的知识点串联起来形成一个整体，从而更方便我们理解和使用。

创建vue3.0项目

首先我们用vue脚手架来创建一个vue3.0项目：vue3vote。

• 运行命令：vue create vue3vote
• 在弹出框中选择 “Default ” 或者“Manually select features”
• 上一步中如果选择了Default则默认创建即可
• 如果选择的是Manually，那么在下一步操作中一定要将“Choose Vue version”选上
• 继续向下选择“3.x”
• 接下来就按照操作提示一步步创建即可

需要注意的是要创建Vue3.0的项目，vue的脚手架（vue-cli）必须要选择4.5版本以上的才可以，否则默认只能创建2.0版本的项目

搭建投票功能模块

• vote.vue

打开上面创建好的项目vue3vote，然后

• 将默认的components/Helloworld.vue"，‘views/Home.vue’和‘views/About.vue’全部删除
• 在views目录下新建一个vote.vue组件
• 在vote.vue组件中一个标题标签h1用于显示投票标签，3个div标签用于显示支持人数，反对人数和支持率
• 最后再添加2个按钮用于投支持和反对

模板设置好以后，我们再来看下JavaScript代码

• 首先从vue中导入ref和computed两个方法，分别用于定义响应式变量和计算属性（用于计算支持率）
• 定义一个props，名称为title，类型为string，必填，用于调用组件时可以动态的传入标题
• 在setup函数中，通过ref函数定义两个响应式变量：supCount和OppCount默认值均为0
• 定义两个方法support和oppose分别用于按钮调用，点击支持按钮调用support方法，点击反对调用oppose方法
• 定义一个计算属性supRate用于计算支持率，该属性结果由computed方法执行返回
• 最后将上面的所有变量和方法通过return暴露出去以便模板使用

<template>
	<div class="vote">
		<h1>{{title}}h1>
		<div>支持人数：{{supCount}}div>
		<div>反对人数：{{oppCount}}div>
		<div>支持率：{{supRate}}%div>
		<button @click="support">支持button>
		<button @click="oppose">反对button>
	div>
template>

import { ref, computed } from 'vue';

export default{
	props:{
		title:{
			type:String,
			required:true
		}
	},
	setup(props,context){
		let supCount = ref(0);
		let oppCount = ref(0);
		// 支持方法
		const support = () => {
			supCount.value++; //用ref声明的响应式变量操作时应该用点value的形式
		} 
		//反对方法
		const oppose = () => {
			oppCount.value++ //用ref声明的响应式变量操作时应该用点value的形式
		}
		
		// 计算属性，计算支持率
		const supRate = computed(()=>{
			let totalCount = supCount.value + oppCount.value;
			return totalCount === 0 ? 0 : (supCount.value/totalCount*100).toFixed(2); // 保留2位小数
		});
	
		//将所有成员暴露出去供模板使用
		return {
			supCount,
			oppCount,
			supRate,
			support,
			oppose
		}
	}
}

• App.vue

App.vue中将原有代码删掉， 然后将上面创建的vote组件引入并传入必填属性title标题

<template>
	<div class="main">
		<vote title="你认为Vue3.0好学吗？">vote>
	div>
template>

import vote from './views/vote.vue'

export default{
	components:{vote},
	setup(){}
}

• main.js

main.js中代码不用做任何改动，使用默认生成的即可

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount("#app");

总结

本文我们创建了一个很简单的投票功能，目的是让大家再巩固一下上一篇文章中学习的关于vue3.0的一些相关知识，其中就用到了vue中setup函数，ref函数，computed计算属性函数。
本次分享就到这里了，喜欢的小伙伴欢迎点赞评论加关注哦！谢谢大家。