vue3怎么学习（必须知道什么是Composition）

vue3从发行到现在已经一年多了、各位小伙伴们是否已经学会了呢？最近在冲浪的码民们、应该也知晓了、vue3要成为默认版本了、可见这生态是非常好的、发展前景也是不错的、这不得卷起来！

很多小伙伴更是吐槽、vue3还没有vue2好用、尤其是代码的结构方式的改变、让代码看起来非常的繁琐、复杂、其实不是的、只要你了解清楚它的核心、你就会发现是真的香，与vue2最大的不同就是从之前的option Api变成了Composition Api、当你了解清楚Composition Api之后你就会发现它vue3为啥不继续用option Api了！

我们先到官网看看文档、跟随文档来学习！记住！不论是学习任何的一门框架、或者是技术、都应该是从官方文档学起、第一遍看不懂不要紧、多看几遍、慢慢的就会理解出不一样的东西、理解的东西就会越来越深入。

我们先来看下一个官方文档的一个案例

// src/components/UserRepositories.vue export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { user: { type: String, required: true } }, data () { return { repositories: [], // 1 filters: { ... }, // 3 searchQuery: '' // 2 } }, computed: { filteredRepositories () { ... }, // 3 repositoriesMatchingSearchQuery () { ... }, // 2 }, watch: { user: 'getUserRepositories' // 1 }, methods: { getUserRepositories () { // 使用 `this.user` 获取用户仓库 }, // 1 updateFilters () { ... }, // 3 }, mounted () { this.getUserRepositories() // 1 } }

会vue2的小伙伴们都知道这段代码的作用

1. 从假定的外部 API 获取该用户的仓库，并在用户有任何更改时进行刷新
2. 使用 searchQuery 字符串搜索仓库
3. 使用 filters 对象筛选仓库

但是这不是关键、关键的是这张图。

一看是不是大吃一惊、平日里一块一块的代码（data、method、watch）看起来非常的杂乱无章。这就是option Api的一个缺点、不能很多的相同的逻辑块、导致项目比较大、比较复杂的情况下、代码逻辑变得非常的不清晰、不友好、而且难以共享。因此、我们的主角composition API登场。

先来看一下、我们使用composition API 改进了之后的一个代码结构。

// src/components/UserRepositories.vue import { fetchUserRepositories } from '@/api/repositories' import { ref } from 'vue' export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { user: { type: String, required: true } }, setup (props) { const repositories = ref([]) const getUserRepositories = async () => { repositories.value = await fetchUserRepositories(props.user) } return { repositories, getUserRepositories } }, data () { return { filters: { ... }, // 3 searchQuery: '' // 2 } }, computed: { filteredRepositories () { ... }, // 3 repositoriesMatchingSearchQuery () { ... }, // 2 }, watch: { user: 'getUserRepositories' // 1 }, methods: { updateFilters () { ... }, // 3 }, mounted () { this.getUserRepositories() // 1 } }

1.增加代码的可读性

2.实现代码的高可用性

3.比原有的Mixins或Slot方式都更加灵活

4.少写很多代码

了解了Composition Api、以及为什么要用Composition Api、Composition Apid。 下章节我们继续讲Composition Api的几个Api。