何时使用 Vue Composition API 的 setup() 钩子

Question

由于Vue的 composition api 已经移植到 当前版本v2 ，显然我们可以在新版本发布前开始使用它。

这些示例通常以新引入的 setup() 钩子为特色，并且 单独 或与基本 JS 功能 一起描述。

乍一看，我以为它只是一个初始化 反应 数据的地方，我会问这样的问题： _在什么情况下应该使用它_。

然而，当你深入挖掘时，似乎没有它就无法实现组合 API。那么，那个钩子有什么用，它可以与 data , methods , computed 等字段一起使用吗？—

原文由 vahdet 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

组合 API 实际上是用另一种方式来完成与以前相同的事情。主要是：

• data 中的本地状态被替换为对 reactive 的调用。
• Hooks mounted , beforeDestroy , etc. are replaced by subscriptions to onMounted , onUnmounted etc.
• watch 中的声明被替换为对 watch 的调用。
• computed 属性被传递给 reactive 的对象中的 computed 调用所取代。
• setup 函数返回一个对象，该对象包含必须保持可从设置函数外部访问的所有事物的组合，特别是从模板。这个功能取代了旧的 methods 。

我会问这样的问题： _在什么情况下应该使用它_。

没有什么是被弃用的，所以你现在有两种方法来做同样的事情，如果你愿意，没有什么能阻止你混合。除了组合 API 之外，没有什么比旧方法更好的了。一旦你采用了它，你就会彻底放弃旧的做事方式。

另请参阅： Vue 的创建者的动机。

原文由 Paleo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

是的，复合 API 是使用 setup() 方法实现的。 setup 的用法告诉 Vue 你想使用组合 API 的函数式方法来实现组件。

Composition API 是一组附加的、基于函数的 API，允许灵活地组合组件逻辑。

示例： 如何在这种功能方法中实现 data methods 和 computed

 <template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

注意：组合 API 也可以作为插件与 Vue.js 2 一起使用（有关更多详细信息，请参见： https ://vue-composition-api-rfc.netlify.com/）

原文由 Simon Thiel 发布，翻译遵循 CC BY-SA 4.0 许可协议