vue3 setup和ref

vue3跟vue2的使用语法，完全不相同了，vue3所有方法变量多写在了setup里面了。

然后我开始改写<script>部分，使用setup()新语法，写了这个就不需要再写data这样的东西了。然后在setup中加入一个girls变量，为了能让模板中进行使用，还需要返回。（有的小伙伴此时可能会感觉有点复杂，没有 Vue2 直接写 data 那么直观，但这正式 Vue3 的先进之处，不用暴漏在界面中的变量就可以不进行返回了。精确控制那些方法和变量被导出和使用

<template>
  <div id="nav">
      <h1>大鹏洗浴中心欢迎你</h1>
      <button 
      v-for="(item,index) in girls"
      :key="index"
      @click="selectGirlFun(index)"
      >{{item}}</button>
//把这三个美女用按钮的形式展示在页面上,这里使用v-for语法。代码如下：
      <div>请选择一位美女为你服务</div>
      <div>我选择了{{selectGirl}}</div>
      <HelloWorld msg="我是组件"/>   
  </div>
</template>

<script>
import {defineComponent,ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({
  name:'App',
  components:{HelloWorld},
  setup(){
      const girls=ref(["大脚", "刘英", "晓红"]);//定义一个变量
      const selectGirl =ref('');//定义一个空变量
      const selectGirlFun=(index:numebr)=>{//定义一个方案
//index:numebr 这是ts的语法，申明一个变量为数值
        console.log(index);
//给新变量赋值，必须加上vue
        selectGirl.value=girls.value[index];
      }
 //因为在模板中这些变量和方法都需要条用，所以需要return出去。
    return {
      girls,
      selectGirl,
      selectGirlFun,
    };
  },
});
</script>
      return{
        girls,//反回定义的数组
        selectGirl,//返回方法得到的新结果
        selectGirlFun,//必须返回方法名字才能执行该方法
      };
  }
})
</script>

<style>
button{margin-right:10px;}
</style>

看效果

相信大家已经看出来了，上面的vue3语法比vue2还麻烦,怎么解决呢，请关注我，使用reactive里面优化方案。

image.png