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

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

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

什么是组合式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。