Closed axetroy closed 3 years ago
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.
Vue
React
Object-oriented is always inseparable from objects (this)
So in Vue, we often write this.xxx
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.
this.addCount
a.addCount
And there is no way to do tree-shake. Once a method is defined in methods, the bundler cannot remove it.
tree-shake
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
Check out #182. The setup block proposed by Evan You is pretty close to what you're looking for 😄
setup
@robertmoura Thanks for telling me that. I did not focus on this proposal.
It's well known that the biggest difference between
Vue
andReact
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 becomesa.addCount
at most.And there is no way to do
tree-shake
. Once a method is defined in methods, the bundler cannot remove it.For a huge project, it is too wasteful to not compress it
So I propose to add a special tag for supporting functional programming
object-oriented programming:
Functional programming:
This is an immature proposal, just to provide a thought