码云前端开发 2021-02-18

05. 用vue的 reactive()函数优化程序

文章目录隐藏

优化程序
给 data 增加类型注解
用 toRefs()继续优化
如何选择 Ref()和 reactive()

在 P04 节中我们学习了setup()和ref()，也算和 Vue3 代码有了一次亲密接触，你现在也做出了一个“餐厅点餐单”。本文我们就学一下reactive的语法和规范，然后用它来优化上节的代码。所以此刻没有打上节代码的同学，请暂停一下，把上节课的代码打出来，再继续学习。

优化程序

在 P04 节的代码可以说没什么章法可言，所有的变量和方法都混淆在一起，我最不能忍受的是在setup中要改变和读取一个值的时候，还要加上value。这种代码一定是可以优化的，需要引入一个新的 APIreactive。它也是一个函数(方法)，只不过里边接受的参数是一个 Object(对象)。

然后无论是变量和方法，都可以作为 Object 中的一个属性，而且在改变selectGirl值的时候也不用再加讨厌的value属性了。在return返回的时候也不用一个个返回了，只需要返回一个data就可以了。

<script lang="ts">
import { ref, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const data = reactive({
      girls: ["小红", "小李", "小张"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });

    return {
      data,
    };
  },
};
</script>

修改完成<script>部分的代码后，还需要修改template部分的代码，因为我们这时候返回的只有data,所以模板部分的字面量前要加入data。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h2>欢迎光北海九号主题餐厅</h2>
    <div>请选择一位美女为你服务</div>
  </div>
  <div>
    <button
      v-for="(item, index) in data.girls"
      v-bind:key="index"
      @click="data.selectGirlFun(index)"
    >
      {{ index }} : {{ item }}
    </button>
  </div>
  <div>你选择了【{{ data.selectGirl }}】为你服务</div>
</template>

这个修改完成后，可以在终端里打开npm run serve，查看一下效果了，如果没有错误，应该和原来的效果一样。效果虽然一样，但是这时候代码，要比上节优雅了很多。这一些的功劳要归属于reactive函数。

给 data 增加类型注解

这时的代码虽然可以完美的运行，但是细心的小伙伴可以发现data这个变量，我们并没有作类型注解，而是采用了TypeScript的类型推断。

这样的代码，在我们公司是不允许出现的，必须要增加类型注解。所以我们先定义一个接口，用接口(interface)来作类型注解。

interface DataProps {
  girls: string[];
  selectGirl: string;
  selectGirlFun: (index: number) => void;
}

编写完成后，你在显示的为 data 变量作一个类型注解.

cosnt data: DataProps = ...

这时候我们的代码才是严谨的。

用 toRefs()继续优化

现在template中，每次输出变量前面都要加一个data，这是可以优化的。有的小伙伴说了，我用...扩展运算符就可以解决这个问题了。

在这里我就可以告诉你不行，因为结构后就变成了普通变量，不再具有响应式的能力。所以要解决这个问题，需要使用 Vue3 的一个新函数toRefs()。使用前需要先进行引入。

import { reactive, toRefs } from "vue";

引入后就可以对data进行包装，把 data 变成refData,这样就可以使用扩展运算符的方式了。具体代码如下：

export default {
  name: "App",
  setup() {
    // const girls = ref(["小红", "小李", "小张"]);
    // const selectGirl = ref("");
    // const selectGirlFun = (index: number) => {
    //   selectGirl.value = girls.value[index];
    // };
    const data: DataProps = reactive({
      girls: ["小红", "小李", "小张"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });
    const refData = toRefs(data);

    return {
      ...refData,
    };
  },
};

这样写之后，你的template就应该去掉 data,而是直接使用变量名和方法，就可以了。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h2>欢迎光北海九号主题餐厅</h2>
    <div>请选择一位美女为你服务</div>
  </div>
  <div>
    <button
      v-for="(item, index) in girls"
      v-bind:key="index"
      @click="selectGirlFun(index)"
    >
      {{ index }} : {{ item }}
    </button>
  </div>
  <div>你选择了【{{ selectGirl }}】为你服务</div>
</template>