2

所以我只是通读了新的 Composition API RFC（链接）。在这里，他们比较了跨组件重用代码的多种方法。其中不包括从模块方法导入。我想那是因为他们严格地谈论 VueJS 并且是为了比较。

在示例中，他们陈述了一种搜索算法。这是我在我的一个项目中使用的。首先，我制作了一个将函数导出为对象的模块：

##search_module.js

let fnc = {
    perform_simple_search: function (str, arr) {
        let result = [];

        arr.forEach(value => {
            if (value.toString().toLocaleUpperCase().includes(str.toLocaleUpperCase()) || value.toString().toLocaleLowerCase().includes(str.toLocaleLowerCase())) {
                if (result.indexOf(value) === -1) {
                    result.push(value)
                }
            }
        });
    }
}

module.exports = {
    perform_simple_search: fnc.perform_simple_search
};

在我需要组件中的函数的地方，我只是像这样导入它：

import {perform_simple_search} from "../search_module";

现在这是我的问题：

如果我可以从模块中导入函数，为什么还要使用组合函数？

4

1 回答 1

2

这不是关于那个。

看——你的perform_simple_search函数确实是一个可以在整个项目中共享的逻辑。问题是它永远不能封装有状态的逻辑。这就是组合 API 所能实现的。

您将能够在这些函数中定义状态和方法，并在组件中重用这种有状态逻辑。想象一下，将这段有状态逻辑提取到一个函数中，您将在不同的组件中导入该函数以赋予它们计数能力：

setup() {
  const state = reactive({
    count: 0
  })

  function increment() {
    state.count++
  }

  return {
    state,
    increment
  }
}

使用 mixins / scoped slots 已经可以做到这一点，但是这些方法有它们的问题：

https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

于 2020-04-28T20:26:23.453 回答