vue3 的 setup 使用（两种方式）

第一种方式 ： defineComponent ref

<script lang="ts">
	import { defineComponent,ref }  from 'vue';
	export default defineComponent({
	   name: 'App',
	   setup() {
	     const girls=ref(['大脚','小脚','高的'])
	     const selGirls=ref('')
	     const selgirlsFunction=(i: number)=>{
	       selGirls.value=girls.value[i]
	     }
	
	     return{
	       girls,
	       selGirls,
	       selgirlsFunction
	     }
	   },
	})

<script>
<template>
  <button 
    v-for="(item ,i) in girls" :key="i"
    @click="selgirlsFunction(i)"
  >{{i+1}}:{{item}}</button>
  <div>
    选择【{{selGirls}}】为你服务
  </div>
</template>

第二种：reactive（） toRefs（） （建议使用这一种）

import {  reactive,toRefs } from 'vue';
<script lang="ts">
interface DataProps{
  girls:string[],
  selGirls:string,
  selgirlsFunction:(i:number)=> void
}
export default {
  name: 'App',
  setup() {
    const data:DataProps=reactive({
      girls:['大脚','小脚','高的'],
      selGirls:'',
      selgirlsFunction:(i: number)=>{
        data.selGirls=data.girls[i]
      }
    })
    const refData=toRefs(data)

    return{
      ...refData
    }
  },
}
<script>
<template>
  <div>欢迎光临！</div>
  <div>请问需要什么服务？</div>
  <button 
    v-for="(item ,i) in girls" :key="i"
    @click="selgirlsFunction(i)"
  >{{i+1}}:{{item}}</button>
  <div>
    选择【{{selGirls}}】为你服务
  </div>
</template>