I'm working on backend most of the time and relatively recently I needed to do switch to frontend part of our service. For me Vue seems much easier and less confusing. You just have your plain html template and a few 'hooks' to make it work with your js script.
>magnitude more complex and is very inconsistent:
Just as the other guy said - it is very intuitive. You don't even have to learn much of js to make it work perfectly.
That being said, I do share some of the other comments about how it can be confusing with bound elements and iterating over objects, or areas you aren't allowed to use string concatenation. A lot of this magic happens behind the scenes so it's a bit of trial and error, and feels foreign if you're used to being able to do those sorts of things in the past.
I also think that React (with JSX) is a bit more "out in the open" about how things work and what is expected, without reading tons of documentation, and less under-the-hood magic. So it's easier to get up to speed, and your JS knowledge will improve over time (especially if you already know other languages).
I feel like these kind of arguments are usually made by people who don't have any extensive experience using Vue, because in practice, it's not really a problem. Sure, you may not like it and prefer JSX (I understand all the pros and cons, all very valid), but that's a whole different statement than saying "Vue's syntax is orders of magnitude more complex and very inconsistent". That's just plain wrong.
There is an easy test to see if my statement was true or false:
<tag attr="x">
At any given point in time the value in an attribute is entirely dependent on context (which particular Vue attribute it's in) and on a very arbitrarily defined rules for those attributes. For example, v-on accepts three absolutely different and incompatible things:
v-on:click="x + 1"
A Javascript expression
v-on:click="function_ref"
A function reference bound to JS-code
v-on:click="function_call(param1, param2)"
Looks like a function call but isn't. It's a way to
declare a function ref that will be called with bound params
Compare to React's JSX:
<tag attr="x"> // x is a string
<tag attr={{ x }}> // x is a valid Javascript expression
<tag onClick={{ function_ref }}>
<tag onClick={{ () => regular_JS_arrow_function() }}>
onClick expects a function reference because that's
what it will eventually call
{
data: function () {
return {
open: false
}
}
}
{
methods: {
toggle: function () {
this.open = !this.open
}
}Different strokes for different folks, but I was quite surprised at my experience. Everyone keeps using the word "intuitive", and anything that I have to learn all these rules and special cases for is the opposite.
If you want to use pure javascript, you can create the render function directly and forget about templates. Most of vuetify components are pure javascript.
Also vue has support for JSX if you prefer that.
It's not wrong, but this way it sounds way more scary than:
"Properties which start with "v-" are treated specially by Vue and don't end up in the rendered output."
Vue’s v-* attributes are a stringy mess [1], and it doesn’t really matter that they don’t end up in the output.
After a few years of using React and some past experience with various other templating/view systems (webdev of one sort or another since '99) I started picking up a little Vue. So far it's been easy enough, but it is highly confusing compared to most other systems I know.
The syntax is like JS handled through custom HTML attributes. In one place a string is a string, in another it's a reference to a component property. If I want to iterate over a list, I spit out the `<ul>` and then an `<li>` that has special attributes that says to repeat it N times, filling in these different bound values. Compare that to, say, React, where my code is code, and my HTML looks like HTML (but is actually code) and the relationships become more clear, less magic. If I want to loop over an array and output some <li> tags....that is exactly what I do.
Vue reminds me of JSP...that's not a point in it's favor in my book.
Now - I've only been using it for a week, and there is so much more to learn. But in terms of first impressions, Vue has not impressed me...and I actually expected to be impressed.