Vue3 - Composition Function 与 import { functionObject } from 'module'

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
  }
}

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

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

Vue3 - Composition Function 与 import { functionObject } from 'module'

Vue3 - Composition Function vs. import { functionObject } from 'module'

import

vue.js

vuejs2

vuejs3