什么时候使用 Vue Composition 的 setup() hook API

Question

作为composition api of Vue has ported for the current version, v2，显然我们可以在新版本发布之前开始使用它。

这些示例通常以新引入的 setup() 挂钩为特色，并且描述为 alone and or along with basic JS functions。

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

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

Answer 1

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

The Composition API is a set of additive, function-based APIs that allow flexible composition of component logic.

示例：如何在这种函数式方法中实现datamethods和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/）

Answer 2

组合API确实是另一种方法来做同样的事情。主要是：

data 中的本地状态被对 reactive 的调用所取代。
挂钩 mounted、beforeDestroy 等被订阅 onMounted、onUnmounted 等取代
watch 中的声明替换为对 watch 的调用。
computed 属性被传递给 reactive.

computed

setup 函数 returns 一个对象，其中包含必须保持可从设置函数外部访问的所有内容的组合，特别是从模板。这个功能取代了旧的 methods.

I'd ask sth like: in what cases should it be used.

没有任何内容被弃用，因此您现在有两种方法可以做同样的事情，如果您愿意，没有什么可以阻止您混合使用。除了组合 API 之外，没有什么比旧方法更好的了。而一旦你采用了它，你将彻底抛弃旧的做事方式。

另请参阅：The motivation of the Vue's creator。

Answer 3

我知道这是一个旧的 post 但只是把它放在这里供像我这样的未来访客使用：

组合 API 旨在通过允许您在组件之间重用和共享数据和逻辑来解决可维护性和可扩展性问题。这样您就不必在不同的组件中重复相同的逻辑。

组合 API 允许您在单独的“可组合”函数中编写所有逻辑，并在 setup() 挂钩中导入和使用它。在这个可组合函数中，你仍然可以有反应性数据属性、方法、生命周期挂钩、计算道具等，但你必须从 'vue' 导入它并以不同的方式实现它。
注意：如果你愿意，除了setup() 钩子。即使您已经在 setup() 挂钩中使用了相同的东西。

您也可以只将所有逻辑写在 setup() 挂钩内，在组件内，而不是将其放在单独的可组合函数中并导入它，但这违背了在组件之间重用逻辑的目的.这样做的好处是您可以编写自己的抽象（如您所说），更注重功能，并遵循类似 React（钩子）的结构，这对于来自 React 的人来说可能更可取。

不一定更好。它失去了使用选项 API（旧方法）获得的结构、可读性和美感。两者都有自己的用例。这取决于您的项目和团队的目标和需求。我个人更喜欢 API 选项，但当我需要在另一个组件中重用逻辑时，我绝对会选择组合 API。

这是一个很好的教程，突出了一些差异：https://www.youtube.com/playlist?list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1

什么时候使用 Vue Composition 的 setup() hook API

When to use setup() hook of Vue Composition API

vue.js

vue-composition-api

我知道这是一个旧的 post 但只是把它放在这里供像我这样的未来访客使用：