【OptionsAPI 与 CompositionAPI】
Vue2的API设计是Options（配置）风格的。Vue3的API设计是Composition（组合）风格的。
Options API 的弊端
Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。
Composition API 的优势
可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。
【拉开序幕的 setup】
setup 概述
setup是 Vue3中一个新的配置项，值是一个函数，它是 MARKDOWN_HASH8651cf3c01cd6648663a8b2e23194843MARKDOWNHASH “表演的舞台”_，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在 setup中。
特点如下：
setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
<template>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄+1</button>
<button @click="showTel">点我查看联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name:'Person',
setup(){
// 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
let name = '张三'
let age = 18
let tel = '13888888888'
// 方法，原来写在methods中
function changeName(){
name = 'zhang-san' //注意：此时这么修改name页面是不变化的
console.log(name)
}
function changeAge(){
age += 1 //注意：此时这么修改age页面是不变化的
console.log(age)
}
function showTel(){
alert(tel)
}
// 返回一个对象，对象中的内容，模板中可以直接使用
return {name,age,tel,changeName,changeAge,showTel}
}
}
</script>setup 的返回值
- 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用（重点关注）。
- 若返回一个函数：则可以自定义渲染内容，代码如下：
setup(){
return ()=> '你好啊！'
}setup 与 Options API 的关系
Vue2的配置（data、methos......）中可以访问到setup中的属性、方法。- 但在
setup中不能访问到Vue2的配置（data、methos......）。 - 如果与
Vue2冲突，则setup优先。
setup 语法糖
setup函数有一个语法糖，这个语法糖，可以让我们把 setup独立出去，代码如下：
<template>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<button @click="changName">修改名字</button>
<button @click="changAge">年龄+1</button>
<button @click="showTel">点我查看联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name:'Person',
}
</script>
<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
console.log(this) //undefined
// 数据（注意：此时的name、age、tel都不是响应式数据）
let name = '张三'
let age = 18
let tel = '13888888888'
// 方法
function changName(){
name = '李四'//注意：此时这么修改name页面是不变化的
}
function changAge(){
console.log(age)
age += 1 //注意：此时这么修改age页面是不变化的
}
function showTel(){
alert(tel)
}
</script>扩展：上述代码，还需要编写一个不写 setup的 script标签，去指定组件名字，比较麻烦，我们可以借助 vite中的插件简化
- 第一步：
npm i vite-plugin-vue-setup-extend -D - 第二步：
vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [ VueSetupExtend() ]
})- 第三步：
<script setup lang="ts" name="Person">