Vue2的API设计是Options（配置）风格的。Vue3的API设计是Composition（组合）风格的。
Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。Composition 可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。
Vue2的：
<template><div class="person"><h1>Person</h1><p>Name: {{ name }}</p><p>Age: {{ age }}</p><button @click="changName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template>
<script lang="ts">export default {name: 'Person',data() {return {name: 'John Doe',age: 25,tel: '1234567890'}},methods: {showTel() {alert(this.tel)},changName() {this.name = 'Jane Doe'},changeAge() {this.age = 30}}}
</script><style>.person {background-color: aqua;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
</style>setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”。
setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
setup返回值可以是一个渲染函数：
return () => '...'
vue2和vue3共存问题：
Vue2的配置（data、methos…）中可以访问到setup中的属性、方法（通过this.访问）- 但在
setup中不能访问到Vue2的配置（data、methos…）。 - 如果与
Vue2冲突，则setup优先。
<template><div class="person"><h1>Person</h1><p>Name: {{ a }}</p><p>Age: {{ b }}</p><button @click="changName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button><br><h2>{{t_name}}</h2></div>
</template>
<script lang="ts">export default {name: 'Person',data() {return {t_name:this.a,}},setup() {// 数据 -- 此时不是响应式的let name = '张三'; let age = 18;let tel = '1234567890';// 方法 -- 这样修改页面没有变化function changName() {name = '李四';}function changeAge() {age = 20;}function showTel() {alert(tel);}return {a:name, b:age, changName, changeAge, showTel}}}
</script><style>.person {background-color: aqua;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
</style>