setup函数

 <script>
      setup() {
        let imgList = [
          {
            path:"",
            src:'https://swiperjs.com/demos/images/nature-1.jpg'
          },
          {
            path:"",
            src:'https://swiperjs.com/demos/images/nature-2.jpg'
          },
          {
            path:"",
            src:'https://swiperjs.com/demos/images/nature-3.jpg'
          },
          {
            path:"",
            src:'https://swiperjs.com/demos/images/nature-4.jpg'
          },
          {
            path:"",
            src:'https://swiperjs.com/demos/images/nature-5.jpg'
          },
        ]
        //基本类型的数据：响应式依然是靠 Object.defineProperty() 的 get 与 set 完成的
        let name = ref('zhangsan')//字符串通过 ref 加工生成一个引用对象  
        //对象类型的数据：内部“求助”了Vue3.0 中的一个新函数———— reactive 函数
        //ref
        // let job = ref({
        //   type:'qianduan',
        //   salary:'30k'
        // })// job.value —— 一个Proxy对象  
        //使用reactive定义一个对象类型的响应式数据
        let job = reactive({
          type:'qianduan',
          salary:'30k'
        })// job —— 一个Proxy对象  
        //数组类型
    let Hobby = reactive(['a','b','c'])

    function changeInfo(){
      name.value = "lisi"
      // ref
      // job.value.type = "UIsheji"
      // job.value.salary = "40k"
      //reactive
      job.type = "UIsheji"
      job.salary = "40k"

      Hobby[0] = 'd'
    }

    // watchEffect(()=>{
    //   const x1 = job.type
    //   console.log("watchEffect配置的回调执行了！");
    // })
    const onSwiper = () => {
      console.log("你点了Swiper");
      alert("你点了Swiper")
    };


    //返回一个对象
    return {
      onSwiper,
      imgList
    };

    //返回一个函数（渲染函数）
    //return ()=>h('h1','111')
  },
 </script>

setup语法糖

<script setup>
...
//可以省略return{}
</script>