Vue3和码上掘金实现猜数字小游戏

前言

Vue3.0 是2020年09月18日正式发布的，距现在两年多了！而且Vue3是默认的Vue版本了，功能也在不断完善和扩展中，比如焕然一新的 Composition API 语法、setup语法等等。

这里，借助这个猜数字小游戏，练习下Vue3的组合式 API 的基础语法。还有，顺便体验下掘金的码上掘金功能（跟Codepen类似）。

代码块

在猜数字小游戏中，我们需要输入框、两个按钮（Check和Reset）这些页面元素。在输入框中我们可以输入猜想的数字，点击按钮Check可以判断是否猜中了，点击按钮Reset可以生成新的随机数并重新进行猜测。

后续优化，我们可以考虑支持用户输入数字范围，比如[0, 200]等。

Vue3 setup

在单文件组件 (SFC) ，setup() 钩子是在组件中使用组合式 API 的入口，我们使用setup()钩子函数并且需要在最后返回所有的变量。写法比较繁琐，而且不小心在最后的return语句会漏写变量…

<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({setup() {const count = ref(0);function addCount() {count.value += 1;}return {count,addCount,};},
});
</script> 

<scrip