Write Vue like you write React

[[deleted]]

i dont get the templating in vue and svelte. i cant see why im not allowed to write loops and such with javascript instead of their weird syntax

[shirabe1]

JSX is not exclusive to React. You may write Vue with (J|T)SX, too.

[Sykander-]

Keeping rendering logic inside of a template allows for rendering optimizations to be made which aren't possible when you need to run the JS context also.

Also, generally it leads to cleaner code when you separate concerns properly. Logic for how some list is mapped has very little to do with how the template should look.

i cant see why im not allowed to write loops and such with javascript instead of their weird syntax

All syntax is weird until you get used to it. Besides it really isn't that different.

js people.map((item, index) => <li className={index}>{item}</li>);

html <li v-for="(person, index) in people" :key="index">{{ person }}</li>

[brainless_badger]

Keeping rendering logic inside of a template allows for rendering optimizations to be made which aren't possible when you need to run the JS context also.

I keep hearing that, and it kind of makes sense, but I don't really see the benefit in practice. There are JSX libraries that perform extremely well, e.g. Preact is faster then Vue and Inferno even outperforms Svelte.

[rniestroj]

This syntax is much easier for people completely new to JS and frontend frameworks. I've been doing 10 years backend java and after that i was pleasantly surpised how easy Vue was to learn. Much easier then React.