使用组合式api——setup代替vue2的选项式api

先说说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