Proposal for functional programming

[axetroy]

It's well known that the biggest difference between Vue and React is that one is functional programming and the other is object-oriented programming.

Object-oriented is always inseparable from objects (this)

So in Vue, we often write this.xxx

This is not friendly to IDE, and greatly increases the code size

this.addCount cannot be compressed, It will become It becomes a.addCount at most.

And there is no way to do tree-shake. Once a method is defined in methods, the bundler cannot remove it.

export default {
  methods: {
    a_method_never_use() {
      // this should be `tree-shake`, but not in this case
    }
  }
}

For a huge project, it is too wasteful to not compress it

So I propose to add a special tag for supporting functional programming

<script mode="esm">

</script>

object-oriented programming:

<template>
    <div>
        {{ count }}
        <button @click="addCount">add</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        };
    },
    methods: {
        addCount() {
            this.count++;
        }
    },
    created () {
        console.log('component created')
    },
    mounted () {
        console.log('component mounted')
    }
};
</script>

Functional programming:

<template>
    <div>
        {{ count }}
        <button @click="addCount">add</button>
    </div>
</template>

<script mode="esm">
import { reactive, useMounted, useCreated } from 'vue';

let count = reactive(0);

export function addCount() {
    count++;
}

useCreated((instance) => {
    console.log('component created');
})

useMounted((instance) => {
    console.log('component mounted');
});

export { count };
</script>

This is an immature proposal, just to provide a thought

[robertmoura]

Functional programming:

Check out #182. The setup block proposed by Evan You is pretty close to what you're looking for 😄

[axetroy]

@robertmoura Thanks for telling me that. I did not focus on this proposal.