vue.js - Vue3 - 组合函数与从 'module' 导入 { functionObject }

Question

所以我刚刚通读了新的 Composition API RFC (link)。
在这里，他们比较了跨组件重用代码的多种方法。
其中不包括从模块方法导入。我想那是因为他们严格地谈论 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";

现在这是我的问题:

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

Answer 1

这不是关于那个。

见 - 你的 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/