BDbdchauvette·Jun 20, 2018
I did once, about 18 months ago.
A couple of problems I remember having:
- Not all features (e.g. most built in directives) work in JSX, and some 3rd party libs didn't work at all as JSX components.
- The JSX isn't a direct mapping to the object properties in `createElement`, which is how (almost?) every other flavor of JSX works. This means you don't just have to learn the the low-level `createElement` API, you also have to learn how that API maps to JSX. [1]
For example, you can't do `<div domProps={{ innerHTML: 'foobar' }} />`, which you might expect if you just read the `createElement` docs. Instead, you have to use `<div domPropsInnerHTML="foobar" />` (but note that not all `domProps` actually need the prefix [2]). Likewise, event handlers use an `onEvent` camel case convention that maps to the `on` property in `createElement`, which
Read the rest
is kinda nice because that's how you add event handlers in other JSX flavors. However, it also means that if a Vue component accepts an `onSomething` prop, you actually have to do something like `propsOnSomething` [3] in JSX, because passing just `onSomething` would convert it to `on: { something: ... }` instead of `props: { onSomething: ... }`.
Overall, when I was trying to use JSX with Vue, it very much felt like a second-class feature, tacked on primarily (if not exclusively) to help convert people from React. However, Vue's flavor of JSX doesn't seem to appreciate that the simplicity of how React maps JSX to `React.createElement` is a large part of its brilliance.
In other words, I think that Vue's flavor of JSX introduces just enough magic to make it confusing. It sacrifices consistency for haphazard ergonomics, making the experience frustrating for someone used to JSX being just an XML-like alternative syntax for `createElement` (or `h` or `m`). I think Vue's JSX would be much better if it didn't try to do any magic, and just forced people to write stuff like `<button on={{ click: () => {} }} />` instead.
In the end, I gave up on using JSX with Vue, tried templates for a bit, didn't like them, and moved away from Vue altogether.
Caveat lector: Things might be a lot better now. I tried to read up a bit to see, but I didn't dig very deeply.
---
[1]: https://github.com/vuejs/babel-plugin-transform-vue-jsx#diff...
[2]: But note that not all `domProps` actually need the prefix, either: https://github.com/vuejs/babel-plugin-transform-vue-jsx/pull...
[3]: This actually used to be impossible when I was trying Vue and JSX. It was only added somewhat recently: https://github.com/vuejs/babel-plugin-transform-vue-jsx/pull...