Vue组合式API

Vue组合式API

1. 概念

Vue3 组合式 API（Composition API） 主要用于在大型组件中提高代码逻辑的可复用性。

• 传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。

• Vue3 使用组合式 API 的地方为 setup。

  在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。因此，组合式 API（Composition API） 允许我们编写更有条理的代码。
  

1.1 传统组件

1.2 组合式API

2. setup 组件

setup() 函数在组件创建 created() 之前执行。

setup() 函数接收两个参数 props 和 context。

• 第一个参数 props，它是响应式的，当传入新的 prop 时，它将被更新。

• 第二个参数 context 是一个普通的 JavaScript 对象，它是一个上下文对象，暴露了其它可能在 setup 中有用的值。

  注意：在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。