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

Question

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

这些示例通常具有一个新引入的setup()钩子，它被单独描述或与基本JS 函数一起描述。

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

然而，当你挖得更多时，似乎没有它就无法实现组合 API。那么，什么是与挂钩的东西，可以用它来使用data，methods，computed等外面领域？

Answer 1

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

组合 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/）

Answer 2

组合 API 实际上是另一种做同样事情的方式。主要是：

• 本地状态 indata由对 的调用替换reactive。
• 钩mounted，beforeDestroy等被订阅所取代onMounted，onUnmounted等等。
• 中的声明watch被替换为对 的调用watch。
• computed属性被computed传递给 的对象中的 调用替换reactive。
• 该setup函数返回一个对象，该对象包含必须从 setup 函数外部，特别是从模板访问的所有内容的组合。并且此功能取代了旧的methods.

我想问一下：在什么情况下应该使用它。

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

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