7

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

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

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

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

4

2 回答 2

11

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

  • in 的本地状态data由对 的调用替换reactive。
  • Hooks mounted,等被,等beforeDestroy的订阅所取代。onMountedonUnmounted
  • 中的声明watch被调用替换watch。
  • computed属性被computed传递给的对象中的调用替换reactive。
  • 该setup函数返回一个对象，该对象包含所有必须从 setup 函数外部（尤其是模板）可以访问的东西的组合。并且此功能取代了旧的methods.

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

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

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

于 2019-10-22T09:16:27.057 回答
5

是的，组合 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>

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

于 2019-10-16T20:01:49.423 回答