P05:用vue的 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>

如何选择 Ref()和 reactive()

网络上对这两个方法的争论还是不少的,但到目前为止,还没有什么实质性的理论到底是用Ref()好,还是reactive()好,也就是两种方法都可以。他们的作用都是生成响应式对象,目前来看只是编写上有所不同。

我个人更倾向于使用reactive(),因为它让程序看起来更规范。如果你学到这里还犹豫不定,也没关系,随着你进一步的深入学习,一定会有你自己的最佳选择。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P05:用vue的 reactive()函数优化程序

发表评论

提供最优质的资源集合

立即查看 了解详情