toRefs顾明思议就是让他变为响应式数据

一.toRefs顾明思议就是让他变为响应式数据，可以直接解构后然后在模板当中使用

1.import { ref, defineComponent, reactive,toRefs} from 'vue' //先从vue引入toRefs

2. const refData = toRefs(data) //赋值

3. return {...refData} //上面使用了toRefs后准备就可以使用解构出来

<template>
  <button @click="selectFunc(index)" v-for="(item,index) in arr" :key="index">{{item}}</button>
  <div>你选择了[{{selectArr}}]去旅游</div>
</template>
<script lang="ts">
import { ref, defineComponent, reactive,toRefs} from 'vue'
interface DataProps{   //这边定义接口，意思就是类型注释
  arr:string[];
  selectArr:string;
  selectFunc:(index:number)=>void
}
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  setup: () => {
    const count = ref(0)
    const data: DataProps = reactive({
      arr:['故宫','长城','圆明园'],
      selectArr:"",
      selectFunc:(index:number)=>{
        data.selectArr = data.arr[index]
      }
    });
    const refData = toRefs(data)
  
    return {...refData}  //上面使用了toRefs后准备就可以使用解构出来
  }
})
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>