使用JSX & ES6提升Vue编程体验

Item.vue

习惯了React再回来看一眼Vue觉得各种复杂,State Props ReactiveState傻傻分不清楚,Object Base的代码组织方式也仿佛回到了没有Babel那个年代。
其实这也不是什么大新闻了,其实从Vue2.x开始Vue和React一样实现了render函数, 也实现了Diff Visual DOM的渲染方式。官网文档中也有提及JSX在Vue中正确的开箱方式,这里不多赘述怎样在现有项目中引入JSX支持,更多的来谈一谈引入JSX后良好的编程体验。

在Template上需要 JavaScript 的完全编程能力

首先需要说明的是我个人对v-if v-for这两个directives使用是有些抗拒的,有些违背逻辑直觉。就像之前写Ruby时看到这样的代码 return true if wtf??在Ruby中用于将类型转换为Boolean),在复杂场景下我更关心在什么条件下他会执行逻辑,而不是执行什么逻辑在什么条件下。我不止一次在Ruby和Vue Template的代码中看到这样懵逼的情况出现。v-for指令也是颇有些的这样意味,但是v-for最为致命的是无法在循环体内加入复杂逻辑,Vue社区哲学强调你应该使用响应式编程的派生对象(computed)或者method来解决,Template上应该保持他的纯净。

// TODO more examples

51行中其实是一个slot template,JSX写出来就是这么点东西。还有就是文档中也有多次提及render函数比Vue Template更接近Vue compiler,而Vue中的JSX则是和React一样,只是一层createElement语法糖。

更多的ES6标准看齐

8012年了,大清都亡了。上点Class Component & Decorator让你的代码更好看一些吧!
// TODO cover more

未来

3.x的版本的Vue已经完全用Typescript来重写了,或许未来会对JSX支持的更好。TSX走起!

最后

Template VS JSX in vuejs.org
此篇并不是安利你Vue一定要使用JSX这样的方式来书写,