05. 用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(),因为它让程序看起来更规范。如果你学到这里还犹豫不定,也没关系,随着你进一步的深入学习,一定会有你自己的最佳选择。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 05. 用vue的 reactive()函数优化程序

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们