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
}
}