没有组件HelloWorld的Home文件，setup的写法

Home.vue

<template>
  <div class="home"> //这个必须要，不然读取不到
  <button @click="count++">{{ count }}</button>
  <HelloWorld msg="Welcome to Your Vue.js App" />//这个可以不要
</div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";//这个可以不要
import { ref } from 'vue'  //这个需要要。不是本来就是vue吗，为什么这里还需要引入

export default {
  name: "Home",   //这个名字name代表什么名字？页面的名字。不是要引入的组件的名字，是这个页面的名字，这个必须要。
  components: {    //这个可以不要。
    HelloWorld,    //同上
  },
  setup() {          //在name下面使用setup
    const count = ref(0)   //定义count
    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {          //返回值
      count
    }
  },
  mounted() {           //挂载
    console.log(this.count) // 0
  }
}
  
</script>

vs

<template>
  <div class="home">
  <button @click="count++">{{ count }}</button>
  
</div>
</template>

<script>
// @ is an alias to /src
import { ref } from 'vue'

export default {
  name: "Home",
  setup() {
    const count = ref(0)
    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },
  mounted() {
    console.log(this.count) // 0
  }
}
  
</script>