Skip to content

使用 Composition API 开发

TIP

Composition API 是 Vue3 全新提供的一种语法,对于从 Vue2 就在使用的开发者,如果一时半会没办法立马上手 Composition API ,你依旧可以在项目中使用 Options API 做开发。当然我们更建议你使用 Composition API 进行开发,它比 Options API 更灵活且易读。

使用

如果你还不熟悉 Composition API ,那么我们建议你阅读 Vue3 官方文档了解;如果你已经熟悉 Composition API ,那么我们建议你在开发的时候,使用 <script setup> 语法糖进行开发,它将提高很多开发上的效率。

同时得益于 unplugin-auto-import 的特性,在 <script setup> 里无需导入相关 API ,该依赖会自动导入(默认支持 vue,vue-router 和 pinia )。

vue
<script setup lang="ts">
// 无需手动 import 相关 API
import { ref, computed } from 'vue' 
import { useRoute, useRouter } from 'vue-router' 

const count = ref(0)
const doubled = computed(() => count.value * 2)

const route = useRoute()
const router = useRouter()
console.log(route.path)
router.push('/dashboard')
</script>
<script setup lang="ts">
// 无需手动 import 相关 API
import { ref, computed } from 'vue' 
import { useRoute, useRouter } from 'vue-router' 

const count = ref(0)
const doubled = computed(() => count.value * 2)

const route = useRoute()
const router = useRouter()
console.log(route.path)
router.push('/dashboard')
</script>

组件 name

<script setup> 可以和普通的 <script> 一起使用,所以可以这样定义组件 name:

vue
<script lang="ts">
export default {
  name: 'componentName',
}
</script>

<script setup lang="ts">
...
</script>
<script lang="ts">
export default {
  name: 'componentName',
}
</script>

<script setup lang="ts">
...
</script>

Vue 3.3 开始,你可以使用 defineOptions<script setup> 里定义组件的 name:

vue
<script setup lang="ts">
defineOptions({
  name: 'componentName',
})
</script>
<script setup lang="ts">
defineOptions({
  name: 'componentName',
})
</script>