使用 Composition API 开发
关于 Options API
Vue3 虽然提供了全新的 Composition API ,但它依旧支持 Options API ,对于从 Vue2 就在使用的开发者,如果一时半会没办法立马上手 Composition API ,你依旧可以在项目中使用 Options API 做开发。
如果你还不熟悉 Composition API ,那么我们建议你阅读 Vue3 官方文档了解;如果你已经熟悉 Composition API ,那么我们建议你在开发的时候,使用 <script setup>
语法糖进行开发,它将提高很多开发上的效率。
同时得益于 unplugin-auto-import 的特性,在 <script setup>
里无需导入相关 API ,该依赖会自动导入(默认支持 vue 和 vue-router)。
<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>
<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>