组合 API 与普通 JavaScript

Question

我正在尝试找出对 'new' Vue 组合 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 编写此 'composition style'，并通过 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>

这两个选项在功能上有什么区别吗？ Composition API的优点是什么？

Answer 1

引自@linusborg 在 Vue Discord server:

组合 API 的目标，如其名称所示，是使组合更容易和更好 - 以前是使用 mixins 完成的。它旨在通过将逻辑与 this 和 Options 对象分离来实现这一点，并允许我们在简单的 Javascript 函数中提取功能，然后我们可以在设置中组合这些函数。

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

现在，您在代码示例中展示的内容可以很好地支持这种组合，但仅限于一定程度：

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，但这与未缓存不同）
生命周期挂钩（安装、更新）

因此，如果您实际上有一段逻辑想要制作 reusable/composable，但它依赖于这些功能之一，您无法真正将其提取到这样的函数中。

这基本上就是组合 API 功能发挥作用的地方 - computed()、ref()、onMounted() 等。

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

组合 API 与普通 JavaScript

Composition API vs. Plain JavaScript

javascript

vue.js

vue-composition-api