一、前言

本文主要讲述在Vue3中组合式API的基本使用。

二、组合式API的写法

1、数据

• 组合式API中，数据在setup函数里面声明
• 数据要在return中返回才能在模板中渲染使用
• 如果数据类型不是响应式数据，当数据改变时，已经展示在页面上的数据不会改变

• 代码：

<template><p>个人信息：</p><p>性别：{{ gender }}</p><p>年龄：{{ age }}</p>
</template><script>
export default {setup() {// 数据let gender = "女";let age = "25";// 返回值// 要返回，数据才能在模板显示return { gender, age };// 在return后面不能再写代码了，已经结束执行了},
};
</script>

• 结果如下：

2、方法（函数）

• 在组合式API中，函数在setup函数里面声明
• 函数要在return中返回才能在模板中使用

• 代码

<template><p>个人信息：</p><p>性别：{{ gender }}</p><p>年龄：{{ age }}</p><button @click="showXingZuo">点击查看星座</button><button @click="showMBTI">点击查看MBTI</button>
</template><script>
export default {setup() {// 数据let gender = "女";let age = "25";// 方法function showXingZuo() {alert("双子座");}function showMBTI() {alert("ISTJ");}// 返回值: 要返回数据才能在模板显示return { gender, age, showXingZuo, showMBTI };// 在return后面不能再写代码了，已经结束执行了},
};
</script><style lang="less">
</style>

• 结果如下：

3、完整代码

<template><p>个人信息：</p><p>性别：{{ data1}}</p><p>年龄：{{ data2}}</p><button @click="functionA">点击查看星座</button><button @click="functionB">点击查看MBTI</button>
</template><script>
export default {setup() {// 数据let data1= "女";let data2= "25";// 方法function functionA() {alert("双子座");}function functionB() {alert("ISTJ");}// 返回值: 要返回数据才能在模板显示return { data1, data2, functionA, functionB};// 在return后面不能再写代码了，已经结束执行了},
};
</script><style lang="less">
</style>

三、setup语法糖

setup语法糖可以简化前面代码提到的setup函数，script标签里面的代码，用setup语法糖可以简化为：

<script setup>
// 数据
let gender = "女";
let age = "25";// 方法
function showXingZuo() {alert("双子座");
}function showMBTI() {alert("ISTJ");
}
</script>

• 结果如下：