Comments (7)
@Roninii
I think there is a little bit of confusion between Class Components and the proposed(now abandoned) Class API. I'm still wrapping my head around all this but this is my current understanding of the whole situation.
Currently we have Vue class components - https://github.com/vuejs/vue-class-component . This is an officially maintained extension of Vue.
This is different from the Vue 3 Class API proposal - vuejs/rfcs#17 . Though very similar there are few subtle differences outlined in the RFC. This was in direct competition with the Composition API. As we now know, the Composition API won this battle. As linked above, this is Evan You's reasoning as to why it was dropped - vuejs/rfcs#17 (comment) .
However, there are no plans to deprecate the current Vue class component. In fact, there is an open issue to adapt the Vue class component for the upcoming changes for Vue 3 - vuejs/vue-class-component#406 .
Sorry I realise this is a bit a brain dump. Please correct me if I'm wrong anywhere.
I'm currently in the process of refactoring one of projects to use class components. So happy to start working on this section. I've been holding off because it seems to be a slightly polarising topic in Vue land. But in the context of using it for better Typescript support, I think it makes a lot of sense!
from vue.
I 100% agree that this should be supported and added to the cheat sheet.
My only concern is that I think the issue thread noting why the proposal was dropped, and what the drawbacks vs. the composition api are.
It will certainly always be an option for those that prefer to use it anyways, and I think that should be encouraged in something so expressive as code. I would just like to add a note that defineComponent
is the preferred and official approach.
from vue.
I am in the process of refactoring an Options Vue 2 app into the class Component style. I was confused about Class Component and Class Api @chiubaca Thanks for clarifying the difference!
Personally, I prefer the class component syntax because it's formalized and mostly standard TypeScript. That allows for easier transitions between frameworks like Angular, Vue, React, etc.
The only thing I was wondering about is what the equivalent of setup()
is from the Composition API but when usnig Class Components. But I figured it out. There was a note about not the constructor function to run initialization code for the component when using Class Components, so we can just run our initialization code in the early view lifecycle hooks such as created()
.
Awesome writeup @louisreingold!
To add to that
- Originally I was using Vuex for basic state management, but now I've dumped it and switched to Akita which is way more robust and easy to use when paired with TypeDI. Now you have easy dependency injection with reactive state management.
from vue.
Nice tips! Will find a way to incorporate this all in. I'm encountering point number 4 too, know of any good patterns to workaround this?
from vue.
awesome tips louisreingold !
from vue.
Awesome advice! If you've got the time for a PR, it's more than welcome! Otherwise we'll get to it soon (:
As for point 1, I definitely think it should be noted that Vue 3 is moving away from this set up as shown here and here, and I personally wouldn't encourage anyone to use this approach.
Of course these are just my opinions and a section demonstrating this approach could still be included as an option!
from vue.
Hello everyone, I have created a vue3 framework with ioc container, named as Cabloy-Front
.
You can find it here: https://github.com/cabloy/cabloy-front
Do you agree with such a concept: Class should not be used in the view layer
, but in the business layer
.
Therefore, it is completely different from vue-facind-decorator
or vue-class-component
that the Vue3 setup syntax sugar is still used to define vue components (such as props and emits of components), and ioc container
and class
are introduced only at the business level. In this way, combine the advantages of the two (function/class) to make the code more concise and elegant.
Cabloy-Front has a very important feature: With the support of ioc container, defining reactive states no longer needs ref/reactive
. Without ref
, naturally there is no need to write a lot of ref.value
.
Demonstration: no ref/reactive
, no ref.value
1. Define reactive state
Define a reactive variable count
in the component and add two methods to modify its value
export class MotherPageCounter {
count: number = 0;
inrement() {
this.count++;
}
decrement() {
this.count--;
}
}
2. Use reactive state
Use count
in render class
export class RenderPageCounter {
render() {
return (
<div>
<div>count(ref): {this.count}</div>
<button onClick={() => this.inrement()}>Inrement</button>
<button onClick={() => this.decrement()}>Decrement</button>
</div>
);
}
}
Demonstration: dependency injection
1. Logic Reuse
Create a Counter
Bean to implement the logic of count
@Local()
export class Counter {
count: number = 0;
inrement() {
this.count++;
}
decrement() {
this.count--;
}
}
2. Inject and use in a component
export class MotherPageCounter {
@Use()
$$counter: Counter;
}
export class RenderPageCounter {
render() {
return (
<div>
<div>count(ref): {this.$$counter.count}</div>
<button onClick={() => this.$$counter.inrement()}>Inrement</button>
<button onClick={() => this.$$counter.decrement()}>Decrement</button>
</div>
);
}
}
from vue.
Related Issues (5)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue.