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

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

前言

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>

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用。

响应式状态需要明确使用 响应式 API 来创建，其中 ref 在模板中使用的时候会自动解包，而响应式变量在调用时需要加上.value，稍微繁琐一些...

<script setup>
import { ref } from 'vue'
const count = ref(0)
console.log(count.value)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

生成随机数

我们想生成范围[m, n]内的随机数，可以借助Math.random()方法，这里，默认的取值范围是[0, 100]。具体是：

function getRandom(min = 0, max = 100) {
  const Range = max - min
  return min + Math.round(Math.random() * Range)
}

check()函数

这里，我们定义变量 isSuccess 表示是否猜中数字，若猜中了则直接返回。

如果输入的数字还是初始值（空字符串）或者输入的不是数字，则返回并提示'请输入数字'。

我们可以将输入的数字存入数组 ansArr 中保存，便于统计输入数字及其输入次数。

function check() {
  if(isSuccess.value) {
    return
  }
  if(num.value === '' || Object.prototype.toString.call(num.value) !== '[object Number]') {
    tips.value = '请输入数字'
    return
  }
  ansArr.value.push(num.value)
  if(ans.value > num.value) {
    tips.value = '小了'
  } else if(ans.value < num.value) {
    tips.value = '大了'
  } else {
    tips.value = 'Bingo!'
    isSuccess.value = true
  }
}

reset()函数

点击按钮Reset后，将变量 isSuccess 赋值为false，并初始化num, tips等变量即可。

function reset() {
  isSuccess.value = false
  ansArr.value = []
  num.value = ''
  tips.value = ''
  ans.value = getRandom()
}

后记

猜数字小游戏，最佳实践是利用二分法不断去压缩区间，最终找到目标数字。二分查找的时间复杂度是 O(logn)，其中n为查找范围，即数字100。