Vue3中组合API-setup函数

        在Vue3中中我们定义数据项和函数时，一般采用setup函数，可以使用data，但是一般b不建议使用，因为使用setup函数更符合组合API的语法规范

      setup函数的使用细节：

     （1）setup是一个新的组件选项，作为组件中使用组合API的起点

     （2）从组件生命周期来看，它的执行在组件实例创建之前Vue2的beforeCreate执行

     （3）这就意味着在setup函数中this还不是组件实例，this此时是undefined

     （4）在模板中需要使用的数据和函数，需要在setup中返回

具体代码演示：

<template>
  <div>{{ msg }}</div>
  <button @click="hClick">点击</button>
  <router-view />
</template>

<script>
export default {
  name: 'App',
  setup() {
    const hClick = () => {
      console.log('click')
    }
    console.log(this) // undefined
    return {
      msg: 'hello',
      hClick
    }
  }
}
</script>

<style lang="less"></style>