OptionsAPI 与 CompositionAPI：
Options API的劣势：
在使用vue2时，数据是存放在data中的，方法是存放在methods中的，计算属性是存放在computed中的等等。
而此时如果我们想要新增或修改其中的一个需求，我们就需要依次去它们中寻找需求的数据什么的，如果代码量少也许还能接受，但是当代码行数超过200行后我们要进行维护什么的就比较麻烦了。
export default {
data() {
return {
// 需求A
// 需求B
}
},
methods: {
// 需求A
// 需求B
},
computed: {
// 需求A
}
}
当我们需要修改需求A时，我们发现其分散在各地，代码量一大就不好找了。
Composition API优势：
Options API就像一本食谱中，其将所有菜的材料都放在一起，这些菜的烹饪手法放一起等等，这样我们去烹饪就太麻烦了。而Composition API就将其放在一起，这道菜的材料和烹饪手法我们都能在同一面找到。
vue3的组合式将一个需求中的数据方法等放置在一个部分，这样当我们修改时，这个需求的全部都在那个位置，使代码更加优雅。
<script setup>
// 需求A：修改名称
let name = '张三'
function changeName() {
name = 'zhangsan'
}
// 需求B：修改年龄
let age = 18
function changeAge() {
age = 20
}
</script>
setup 对比 vue2的data和methods：
首先我们先写一个简单的vue2组件，在页面上显示姓名与年龄，并且包含一个按钮来修改名称。
<template>
<div class="person">
<h2>姓名： {{ name }}</h2>
<h2>年龄： {{ age }}</h2>
<button @click="changeName">修改名字</button>
</div>
</template>
<script>
export default {
name: "Person",
data() {
return {
name:"张三",
age: 18,
}
},
methods: {
// 修改名字
changeName() {
this.name = "zhangsan"
}
}
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin:0 5px;
}
</style>
在运行后实现的效果如图：
在vue2的选项式API，我们使用data() {}来配置数据，用methods {}来配置方法。而在vue3中，setup() {}是一个全新的配置项，所以其与data、methods都是同一等级的，所以setup也编写在export default {}中。
但是vue3中我们是使用组合式API，所以我们可以直接将data和methods直接删除，但是这样组件内就不包含我们需要的数据和属性了，接下来setup就要派上用场了。
在setup中我们可以直接定义数据和方法，其与data和methods的写法也相似，并且效果也相同，只不过在setup中我们需要最后将方法和数据都通过return来提交出去，这样<template>中的模板才能对其进行渲染，如下：
<script>
export default {
name: "Person",
setup() {
// 数据
let name = "张三"
let age = 18
// 方法
function changeName (){
name = "zhangsan"
console.log(name)
}
// 返还数据和方法
return {
name,
age,
changeName
}
// 返还值也可以是一个渲染函数，通过函数的return直接指定渲染的内容
// return () => "哈哈" // 这样页面上就会显示"哈哈"
}
}
</script>
但是当按下按钮后页面并没有发生改变。不用担心，并不是代码出错，只是这里并没有使用响应式数据，方法是已经执行了，数据也发生了改变，只是页面还是和初始一样。
值得注意的是，即使我们使用了setup，但是并不代表我们不能继续使用vue2中的data和methods。
不过需要注意的是，setup的渲染优先级是高于data和methods的，所以在data和methods进行配置的时候，setup中的内容已经解析完了，使用它们可以使用setup中的数据的。反之，setup是不能用它们的数据和方法的。例如：
<script>
export default {
name: "Person",
data() {
return {
a:this.name // a = "张三"
}
},
methods: {
changeName() {
this.name = "zhangsan"
}
}
setup() {
let name = "张三"
return {
name
}
}
}
setup语法糖：
在vue3中，为了简化代码结构、提高开发效率，优先使用组合式API的语法糖形式，setup的语法糖也极其简单。
<script setup>
let a = 100
</script>
<!-- 相当于下面的代码 -->
<script>
setup () {
let a = 100
return { a }
}
</script>
当然其好处也不止于此，在<script setup>标签内，可以直接使用Vue Composition API中的函数和特性（如ref、reactive等）
<script setup>
import { ref } from 'vue'
// 定义一个响应式的计数器
const count = ref(0)
</script>
<template>
<button @click="count++">
You clicked me {{ count }} times.
</button>
</template>
