Comment by Lukas_Skywalker
16 days ago
While I understand the advantage of using the built-in language features (and I know why it is required to be done that way), I still think using
{enable && <Form />}
for conditional rendering, or
{collection.map(x => <Item x={x} /> }
for looping are not the most obvious choices. If you ask people how conditionals and loops are written in JS, you will get 'if' and 'for' or variants of 'while'. So I get where the v-if and v-for are coming from.
Me personally, I prefer these more functional (and more succinct) expressions. For loops are overly verbose, and not as composable. But then again, I'm a Lisp programmer.
Let's say you to render conditionally when `x` is present. You do `v-if="x"`. Now you want to refer to `x.y.z` in the body, while `y` is optional.
Can you be sure that the value is present? How do you check for it? What does Vue need to do to enable this functionality with static type checking with TypeScript?
With `{x && <>{x.y.z}</>}`, it's almost vanilla TS, it's the same as `x && x.y.z` in normal TS. Type narrowings that work in TS are guaranteed to work in React, without the framework having to do anything.
Less framework/library code required to make the same thing work. To me, that's the sign of a better abstraction and implementation.