使用 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>
// 原先需要手动 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>

vue

<script setup>
// 现在直接使用即可
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> 一起使用，所以可以这样：

vue

<script>
export default {
  name: 'componentName',
}
</script>

<script setup>
...
</script>

另外框架引用了 vite-plugin-vue-setup-extend 依赖，所以可以更方便的设置。

vue

<script setup name="componentName">
...
</script>

使用 Composition API 开发 ​

使用 ​

组件 name ​

使用 Composition API 开发

使用

组件 name