美文网首页
vue reactive使用方法

vue reactive使用方法

作者: 小李不小 | 来源:发表于2021-05-27 21:52 被阅读0次

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

    然后无论是变量和方法,都可以作为 Object 中的一个属性,而且在改变selectGirl值的时候也不用再加讨厌的value属性了。再return返回的时候也不用一个个返回了,只需要返回一个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>
    <script lang="ts">
    import { reactive,toRefs } from "vue";
    多不用使用 ref了
    //引入 reactive 
    export default {
      name: "App",
      setup() {
    //把方法和变量多放人 reactive中
        const data = reactive({
          girls: ["大脚", "刘英", "晓红"],
          selectGirl: "",
          selectGirlFun: (index: number) => {
            data.selectGirl = data.girls[index];
          },
        });
    
      //直接返回一个变量就可以了
     const refData = toRefs(data);
    
        return {
          ...refData,
        };
      },
    };
    </script>
    

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

    image.png

    相关文章

      网友评论

          本文标题:vue reactive使用方法

          本文链接:https://www.haomeiwen.com/subject/gsadsltx.html