04. vue的setup()和 ref()函数制作点餐小程序

本文我们通过一个简单的点餐流程，初步了解一下 Vue3 中 Ref 的魅力。这个点餐很简单，所以你学习的时候不要有任何的压力。 如果你真的听起来非常难，请一定在听过之后动手敲一下这段代码，你会有更深的领悟。

清理无用的代码

在用vue-cli生产的 Vue3 项目中，有一些默认的代码，为了方便学习，需要清理掉一些无用的代码。

打开根组件App.vue文件，去掉HelloWorld自定义组件相关代码。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  components: {},
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这时候再进行浏览就没有其他的元素了，只剩下一个Vue的图标。就可以继续开发啦。这时候你可以在终端中运行yarn serve,在浏览器中预览一下效果。

编写服务程序

在App.vue里添加如下代码，我先修改了template，增加了两行代码和一个按钮。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h2>欢迎光北海九号主题餐厅</h2>
    <div>请选择一位美女为你服务</div>
  </div>
  <div>
    <button> </button>
  </div>
</template>

然后我开始改写<script>部分，使用setup()新语法，写了这个就不需要再写data这样的东西了。然后在setup中加入一个girls变量，为了能让模板中进行使用，还需要返回。（有的小伙伴此时可能会感觉有点复杂，没有 Vue2 直接写 data 那么直观，但这正式 Vue3 的先进之处，不用暴漏在界面中的变量就可以不进行返回了。精确控制那些方法和变量被导出和使用）。

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const girls = ref(["小红", "小李", "小张"]);
    return {
      girls
    };
  },
});
</script>

写完后可以把这三个美女用按钮的形式展示在页面上,这里使用v-for语法。代码如下：

<button v-for="(item, index) in girls" v-bind:key="index">
  {{ index }} : {{ item }}
</button>

现在要实现的就是当我们点击按钮的时候，触发一个方法selectGirlFun，方法绑定一个选定值selectGirl,具体实现代码如下。

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const girls = ref(["小红", "小李", "小张"]);
    const selectGirl = ref("");
    const selectGirlFun = (index: number) => {
      selectGirl.value = girls.value[index];
    };
    //因为在模板中这些变量和方法都需要调用，所以需要 return 出去。
    return {
      girls,
      selectGirl,
      selectGirlFun,
    };
  },
});
</script>

修改template代码，为Button绑定selectGirlFun事件，实现联动效果。

<button 
  v-for="(item,index) in girls"
  v-bind:key="index"
  @click="selectGirlFun(index)"
  >
  {{index}}:{{item}}
</button>

这样我们这个最简单的点餐小程序就制作完了。

总结

我们通过一个简单的点餐需求，讲解了一些 Vue3 的新知识点，现在来总结一下：

• setup 函数的用法，可以代替 Vue2 中的 data 和 methods 属性，直接把逻辑卸载 setup 里就可以
• ref 函数的使用，它是一个神奇的函数，我们这节只是初次相遇，要在template中使用的变量，必须用ref包装一下。
• return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴露的变量和方法。

本文我们就学这么多，需要提醒小伙伴的是一定要跟着码云笔记一起学习，把代码敲出来。只看是学不会的，我在所有的教程中反复强调这个问题，目的只有一个，就是让你能学有所成。