Hacker News Reader

I've been using it for 6 months now, and I still can't wait to go back to React, for the exact same reason you mentioned. I'm 'fluent' in Vue now, and it hasn't grown on me in the slightest.

I have the opposite feeling to you. The template feels like HTML to me and the syntax is clear and concise. React for me gets confusing with it all muddled together. But each to their own.

Compared to React (and React’s JSX) Vue’s syntax is orders of magnitude more complex and is very inconsistent: https://news.ycombinator.com/item?id=19199423

I feel that this baybe the case when you know js very well and it's just easier for you to write 'custom-js' that will be transpiled to regular one.

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.

Thank you! That is the best explanation I’ve seen on how people may perceive Vue vs React vs other frameworks. Never thought of it this way.

I think this is accurate. My background is also in the backend realm and so I'm not a frontend person and my Javascript knowledge is marginal. I recently had to take on a more frontend project and I went with Nuxt/Vue over React.

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).

You can use JSX in Vue if you so choose (https://vuejs.org/v2/guide/render-function.html). I personally prefer the templates, and I enjoy the usage of HTML attributes for loops / conditionals, but the option is there, and there's no one correct answer here that everybody can agree on (which is fine).

That's a very strong statement. To me the templating part of Vue is the least of my problems. While in theory you could make it sound complex by listing an exhaustive list of custom attributes, in reality this is almost never a problem. I have 2+ years experience in Vue, and I've never had any issues with the templating. Problems that are orders of magnitude more complex than templating are problems related to component lifecycles, functional composition, higher-order components, application architecture, server-side rendering + hydration, etc. None of this is solved by using JSX or some other templating language and these kind of problems exist regardless choosing Vue/React.

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.

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

where "attr" is a Vue attribute. What is x and what can x be? An expression? A string? A function reference? An object? How will it be processed and presented in the end? As a string? As a function call?

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

And that's just one of the tags! I'm not even touching on the JS side of things where magic is abound (see comments at the end here: https://news.ycombinator.com/item?id=17471199)

Compare to React's JSX:

    <tag attr="x"> // x is a string
    <tag attr={{ x }}> // x is a valid Javascript expression

These are the same and they are consistent for every single attribute. The only limitations come from the meaning and the usage of the attributes themselves.

    <tag onClick={{ function_ref }}>
    <tag onClick={{ () => regular_JS_arrow_function() }}>
       onClick expects a function reference because that's
       what it will eventually call

And the rest around JSX? Plain old Javascript. Where this:

    {
      data: function () {
        return {
          open: false
        }
      }
    }

doesn't magically turn into this in a completely different part of the object:

    {
      methods: {
        toggle: function () {
            this.open = !this.open
        }
    }

I doubt we'll agree, but something as simple as: make an unordered list of hrefs with a url (based on name) and the name. Also, have a class on the currently selected <li> (currently selected meaning some variable matches the item name in the list) ends up with several special attributes, and a scope question (will a bound class see the iteration variable?) - all of which is not a question in something like React because there's not special scope being created, the same rules I'm used to always apply.

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.

One thing I love about Vue is flexibility.

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.

This is the same for React. Not sure about Angular it's been a while since I've used it.

> In one place a string is a string, in another it's a reference to a component property.

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."

It doesn’t sound scary. It sounds correct and on the point.

Vue’s v-* attributes are a stringy mess [1], and it doesn’t really matter that they don’t end up in the output.

[1] https://news.ycombinator.com/item?id=19199423