组合 API 与纯 JavaScript答案

【问题标题】：Composition API vs. Plain JavaScript组合 API 与纯 JavaScript
【发布时间】：2021-04-07 17:05:48
【问题描述】：

我正在尝试找出对“新”Vue Composition API 的需求。

假设我们有以下组件，来自他们的basic example：

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from '@vue/composition-api'

export default {
  setup () {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2),
    })

    function increment () {
      state.count++
    }

    return {
      state,
      increment,
    }
  },
}
</script>

我们还可以使用纯 JavaScript 编写这种“组合样式”，并通过 data 选项使其可用：

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
export default {
  data () {
    const state = {
      count: 0,
      get double () {
        return this.count * 2
      },
    }

    function increment () {
      state.count++
    }

    return {
      state,
      increment,
    }
  },
}
</script>

这两个选项在功能上有什么区别吗？组合 API 有哪些优势？

【问题讨论】：

标签： javascript vue.js vue-composition-api

【解决方案1】：

在Vue Discord server@linusborg 中引用：

正如其名称所示，组合 API 的目标是让组合变得更容易和更好——这在以前是使用 mixins 完成的。它旨在通过从 this 和 Options 对象中解耦逻辑来做到这一点，并允许我们在简单的 Javascript 函数中提取功能，然后我们可以在 setup 中进行组合。

与 Vue 2 mixins 方法相比，这种组合有很多好处，即易于在 TS 中键入，易于查看内容来自何处以及代码的哪一部分依赖于什么等等。所以主要关注点是提出更好的组合模式并摆脱 mixin 的问题。

现在，您在代码示例中显示的内容可以很好地实现该组合，但仅在一定程度上：

function reusableState () {
  const state = {
    count: 0,
    get double () {
      return this.count * 2
    },
  }

  function increment () {
    state.count++
  }

  return {
    state,
    increment,
  }
}

export default {
  data () {
    return reusableState()
  },
}

但这并没有考虑到许多其他功能：

观看
已计算（您使用的是 getter，但这与未缓存不同）
生命周期挂钩（安装、更新）

因此，如果您确实有一段逻辑想要使其可重用/可组合，但它依赖于其中一个功能，您无法真正将其提取到这样的函数中。

这基本上就是组合 API 功能的用武之地——computed()、ref()、onMounted() 等。

您可以在此处阅读对组合 API 的设计和优势的更深入探索：https://vue-composition-api-rfc.netlify.com/

【讨论】：