vue reactive使用方法

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。
效果还是能执行