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 slot 实现，但是这些方法有它们的问题:

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