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

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

前言

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

创建vue3.0项目

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

• 运行命令：vue create vue3vote
• 在弹出框中选择 “Default <Vue 3>” 或者“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暴露出去以便模板使用

<!--vote.vue-->
<template>
	<div class="vote">
		<h1>{
  {title}}</h1>