就目前而言，我用到的前端页面开发框架主要有两种：以JSX为主的react和以template为主的vue。
虽然这两种方式各有千秋，但我其实更偏爱template多一些。为什么？
相较于灵活的JSX，template显得有些呆滞，但我认为它更符合我们的书写习惯（想想我们最开始是如何编写html的），简单、直观、更好维护是我偏爱模板的三大理由。
直到某天一个bug的出现，让我对template有了新的思考。
// 出现 bug 的代码片段<template v-if="oitem.show">
<div class="a-text-light" v-for="(oitem, j) in item.content" :key="j">
{{ooitem.date}} {{oitem.week}}
</div>
</template >
注意上面的代码，由于手误手残，在第一个oitem前多写了一个o。eslint没有发现，编译过程也没报错，由于对应业务的特殊性，测试中也没有触发错误。
于是上线，boom！
多一个字母，让整个应用崩溃掉了。该死！
这种错误不应该犯，但却又不能完全避免，怎么办？人总会犯错，但机器不会。所以，应该把错误检查交给机器执行。
有没有一种方法使得再编码或者编译过程中就能识别这个错误呢？
JSX将拯救你我于水火。
用JSX重构上面的代码：
let dateDiv = item.show
? item.content.map(oitem => (<div className="a-text-light">{ooitem.date} {oitem.week}</div>) )
: '';
由于JSX是类型安全的，在编译过程中就能发现错误，所以上面的ooitem就会被识别粗来。
从此不必在担惊受怕。
