vue3中，新增了 defineComponent ，它並沒有實現任何的邏輯，只是把接收的 Object 直接返回，它的存在是完全讓傳入的整個對象獲得對應的類型，它的存在就是完全為了服務 TypeScript 而存在的。

我都知道普通的組件就是一個普通的對象，既然是一個普通的對象，那自然就不會獲得自動的提示，

import { defineComponent } from 'vue'

const component = {
  name: 'Home',
  props:{
    data: String,
  },
  setup // 沒有該有的提示，這非常的不友好
}

export default component

但是當我們加上 defineComponent（） 之後，就完全不一樣了，可以獲得自動提示，vue2、vue3的自動提示都有

import { defineComponent } from 'vue'

const component = {
  name: 'Home',
  props:{
    data: String,
  },
  setup（）{
    // setup 可接受兩個參數，一個props，和 context
  }
}

export default component

接下來看看 setup 中的兩個參數 props 與 context ,
props指組件傳遞來的參數，並且ts可以推論出props的類型.props也就是 vue2 中組件中的 props
context 有三個屬性 attrs slots emit 分別對應vue2中的 slots插槽、$emit發送事件

import { defineComponent } from 'vue'

const component = {
  name: 'Home',
  props:{
    data: String,
  },
  setup（props, context）{
    // props.data
    // context.attrs    context.slots    context.emit 
  }
}

export default component