setup是一个配置项，其值是一个函数。
组件用到的数据、方法等都放在setup这个配置项中。

setup函数的返回值，可以是一个对象，也可以是一个函数（且是渲染函数）。
setup函数返回值是一个对象时，对象的属性、方法都可以在模板中直接使用。
setup函数返回值是一个渲染函数时，可以自定义渲染内容。

setup函数返回值是一个对象

• 入口文件main.js

import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app')

• App.vue

<template><h1>个人信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="sayHello">sayHello</button>
</template><script>
export default {name: 'App',setup(){let name = "张三";let age = 18;function sayHello(){alert(`大家好，我叫${name}，今年${age}岁。`);}return {name,age,sayHello}}
}
</script>

注意哈！！Vue3中，组件的模板结构中可以没有根标签。

• npm run dev，启动应用，测试效果
  

setup函数返回值是一个渲染函数

• 入口文件main.js

import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app')

• App.vue

<template>
</template><script>
import {h} from "vue";
export default {name: 'App',setup(){let name = "张三";return () => {return h('h1',`大家好，我的名字是${name}`);}// return () => h('h1',`大家好，我的名字是${name}`);}
}
</script>

• npm run dev，重启应用，测试效果