Vue3：组合式API的基本使用

一、前言

本文主要讲述在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>

• 结果如下：