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

Posted 2023-02-16

【中文标题】何时使用 Vue Composition API 的 setup() 钩子

【英文标题】：When to use setup() hook of Vue Composition API

【发布时间】：2020-02-13 13:43:25

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

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

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

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

【参考方案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/）

【讨论】：

好吧，你的注释不是真的：正如我所提到的，composition api 在 V2 中也可用。另请参阅 LinusBorg 的 demos。除此之外，我可以在你的回答中要求补充一点，旧的data、methods 等和组合 api 是互斥的吗？

@vahdet，谢谢我已经相应地更新了我的答案