setup函数的两种返回值

1、若返回一个对象，则对象中的属性，放在，在模板中均可以直接使用（重点关注）

<template><div class="setup"><div>姓名：{{name}}</div><div>年龄：{{age}}</div><button @click="seyHolle()">提示</button></div>
</template>
<script>export default{setup(){// 数据let name ='张三';let age = 18;// 方法function seyHolle(){console.log(`你好我叫${name},我${age}岁了。`);}// 返回一个对象（常用）return{name,age,seyHolle,}}}
</script>

2、若返回一个渲染函数，则可以自定义渲染内容。（了解）

<template><div class="setup"></div>
</template>
<script>import {h} from 'vue'export default{setup(){//返回一个函数，称之为渲染函数return ()=> h('h1','测试文字')}}
</script>

注意：

• 尽量不要与Vue2的配置混用
• Vue2.x 配置（data、methods、computed…）中 可以访问 到setup中的属性，方法
• 但在setup中 不能访问 Vue2.x配置（data、methods、computed…）
• 如果有重名，setup优先
• setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。