一、基本介绍 在Vue2中，使用的是Options API （选项式API）。而Vue3中虽然也兼容Options API ，但是更推荐Composition API （组合）。那什么是Options API，什么是Composition API 呢？先来看以下例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <script> export default { // data() 返回的属性将会成为响应式的状态 // 并且暴露在 `this` 上 data() { return { count: 0 } }, // methods 是一些用来更改状态与触发更新的函数 // 它们可以在模板中作为事件处理器绑定 methods: { increment() { this.count++ } }, // 生命周期钩子会在组件生命周期的各个不同阶段被调用 // 例如这个函数就会在组件挂载完成后被调用 mounted() { console.log(`The initial count is ${this.count}.`) } } </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>
以上便是Options API ，如果改成Composition API ，那么要借助setup 语法。
二、setup介绍 setup 是Vue3 的配置项，它是一个函数，之前使用Options API 方式定义的数据、方法、计算属性、监听等数据，都是配置在setup 中。以下示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <script> import { ref, onMounted } from 'vue' export default { name: 'App', setup() { // 响应式状态 // 响应式状态 const count = ref(0) // 用来修改状态、触发更新的函数 function increment() { count.value++ } // 生命周期钩子 onMounted(() => { console.log(`The initial count is ${count.value}.`) }) return { count, increment } } } </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>
在setup 中返回的对象，不管是数据还是方法，都可以直接在模板中使用。而为了实现方便，可以使用setup语法糖，即<script setup> ，这样就无须显示写setup 函数，写在script 中的所有数据和方法都可以直接在模板中使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script setup> import { ref, onMounted } from 'vue' // 响应式状态 // 响应式状态 const count = ref(0) // 用来修改状态、触发更新的函数 function increment() { count.value++ } // 生命周期钩子 onMounted(() => { console.log(`The initial count is ${count.value}.`) }) </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>
三、setup上指定组件名称 上述代码无法指定组件名称，如果想要指定组件名称，还需要额外添加一个script 标签：
1 2 3 4 5 <script> export default { name: 'App', } </script>
为了解决这个问题，可以使用vite-plugin-vue-setup-extend 插件来简化。步骤如下：
1 2 3 4 5 6 7 8 9 import VueSetupExtend from 'vite-plugin-vue-setup-extend' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), VueSetupExtend() ], })
● 在script标签上指定name属性：<script setup name=”App”>
