Vue3 Composition API 介绍详解

它是一套能够灵活组合组件逻辑，且基于函数式的和渐进式的 APIs。

通俗点来说就是 Vue3 提供了一种新的方式(组合函数式)来组织和编写组件的逻辑代码。

Composition API 将会替代 Vue2 的 Options API

下面通过相同功能的实例来展示两者代码之间的不同

• Composition API

<template>
  <div>
    <button @click="increment">Button tapped {{state.times}} times</button>
  </div>
</template>

<script>
  import { createComponent, reactive } from '@vue/composition-api'

  export default createComponent({
    setup() {
      let state = reactive({
        times: 0
      })

      const increment = () => {
        state.times++
      }
      return {
        state,
        increment
      }
    }
  })
</script>

• Options API

<template>
  <div>
    <button @click="increment">Button tapped {{times}} times</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        times: 0
      }
    },
    methods: {
      increment() {
        this.times++
      }
    }
  }
</script>

可以看到它们之间区别挺大的，但不用担心，下面会对这个新事物的使用进行详细讲解。