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

Question

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

这些示例通常具有新引入的setup() 钩子，它被描述为alone 和/或与基本JS functions 一起描述。

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

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

Answer 1

组合 API 确实是与以前做同样事情的另一种方式。主要是：

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

我会问：应该在什么情况下使用。

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

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

Answer 2

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

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

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