先說說vue2的選項式api，請看代碼

<template>
  <div id="app">
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      //code
    };
  },
  computed: {
  //code
  },
  watch: {
    //code
  },
  created() {
   //code
  },
  methods: {
  //code
  }
};
</script>

這是一個常見的vue2文件，其中data,computed,watch,created,methods等就是選擇式api

再看看vue3

<template>
  <div id="app">
    {{foo}}
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
const foo = ref(null)
setup(){
  onMounted(() => {
    //code
  });
  return{ foo }
},

</script>

setup和ref等就是新的組合式api