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

Question

So I just read through the new Composition API RFC (link). Here they compare multiple methods to reuse code across components. Therein the import from module method is not included. I guess that's because they are talking about VueJS strictly and for comparison purposes.

In the example they state a search algorithm. This I used in one of my projects. First I made a module which exports the function as an object:

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

And where I needed the function in a component I just imported it like so:

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

And here is now my Question:

Why use a composition Function if I can just import a function from a module?

ajobi ajobi · Accepted Answer · 2020-04-28T20:26:23

It's not about that.

See - your perform_simple_search function truly is a piece of logic that can be shared throughout the project. The problem is it can never encapsulate stateful logic. And that is what will be possible with the composition API.

You will be able to define pieces of state and methods inside these functions and reuse this stateful logic in your components. Imagine extracting this piece of stateful logic into a function which you will import in different components to give them counting ability:

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

  function increment() {
    state.count++
  }

  return {
    state,
    increment
  }
}

This was already possible with mixins / scoped slots, but these methods had their problems:

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

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

1 Answers