[TOC]

1.精简的<script setup>

<script setup>的本质：用更精简的方式书写Composition API。

下面以实现一个累加器为例，看看使用<script setup>标签能省多少事。

<script setup>
import { ref } from "vue";
let count = ref(1)
function add(){
    count.value++
}
</script>

<script >
import { ref } from "vue";
export default {
  setup() {
    let count = ref(1)
    function add() {
      count.value++
    }
    return {
      count,
      add
    }
  }
}
</script>

上面标出的代码是二者的共同部分，可以看到后者还是相当臃肿的，不仅多了两层嵌套，还得加个return。使用