什么是 Composition API ？

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

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

Composition API 将会替代 Vue2 的 Options API

  • 我认为 Composition API 将来会慢慢替代 Vue2 的 Options API，虽然 Vue3 仍然兼容 Vue2 的 Options API，但站在代码的可读性、维护性和一致性的角度来看，你最好不要两者都在同一个组件中使用。
  • Vue2 中的 Options API 能做的事，Composition API 都能做，反之则不行。在 Options API 里面无法直接复用组件的逻辑，只能通过 Mixin(混入)，但它不是很好的选择，随着组件的复杂度增长，它无法清晰的展示数据状态来源，稍不注意还会造成命名冲突等问题，会给项目带来副作用。
  • Composition API 更面向未来。

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

  • Composition API
  1. <template>
  2.   <div>
  3.     <button @click="increment">Button tapped {{state.times}} times</button>
  4.   </div>
  5. </template>
  7. <script>
  8.   import { createComponent, reactive } from '@vue/composition-api'
  10.   export default createComponent({
  11.     setup() {
  12.       let state = reactive({
  13.         times: 0
  14.       })
  16.       const increment = () => {
  17.         state.times++
  18.       }
  19.       return {
  20.         state,
  21.         increment
  22.       }
  23.     }
  24.   })
  25. </script>
  • Options API
  1. <template>
  2.   <div>
  3.     <button @click="increment">Button tapped {{times}} times</button>
  4.   </div>
  5. </template>
  7. <script>
  8.   export default {
  9.     data() {
  10.       return {
  11.         times: 0
  12.       }
  13.     },
  14.     methods: {
  15.       increment() {
  16.         this.times++
  17.       }
  18.     }
  19.   }
  20. </script>

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