1、setup

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对象中的属性。