Proposal for functional programming #211
Description
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