本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
Vue.js 具有简单的 API 和几个选项，可用于在我们的组件中定义HTML模板。
我们可以使用 标签选项，在根组件实例上定义 template 属性，或者使用单文件组件。
上面的选项很棒并且可以完美地工作，但是，在您的应用程序的生命周期中，有时会感到笨拙，设计过度或非常不灵活。
那么，我们为什么要使用 JSX 而不是其他模板定义呢？
- JSX 更易读， 的写法一看就是比 this.$createElement('div', {}, [...]) 简洁很多。
- JSX 也是 Javascript。
- Vue支持JSX。
- JSX 使自定义 Vue 组件更容易导入和管理。
简介
先举一个例子来说明为什么 JSX 是好的。
我们要构建一个
: return inputMarkup }
导入 Vue JS 组件
在 Vue 中使用JSX的另一个好处是，我们不再需要注册所需的每个组件。 我们只是导入和使用。
import {Button} from '../components'
export default {
render (createElement) {
return
}
}
如何使 JSX 与 Typescript 一起使用
Typescript 用作一种向 Javascript添加类型检查的机制。要在 JSX 支持 Typescript中，需要修改 tsconfig.json 。
要在 Typescript 中启用 JSX，请先将该文件另存为 .tsx 文件，然后将 tsconfig.json 修改为包括：
{
"compilerOptions": {
....
"jsx": "preserve",
}
}
将 jsx 选项设置为 “preserve” 意味着 Typescript 不应处理JSX。 这样做使 Babel 可以控制所有JSX 和 Typescript 坚持使用类型，因为它尚不支持 Vue JSX。
然后在项目中创建一个 jsx.d.ts 文件，并为 Vue 添加 Typescript JSX 声明。
import Vue, {VNode} from 'vue'
declare global {
namespace JSX {
interface Element extends VNode {}
interface ElementClass extends Vue {}
interface ElementAttributesProperty {
$props: {}
}
interface IntrinsicElements {
[elemName: string]: any
}
}
}
确保 Typescript 可以加载声明文件。 或者，可以通过以下方式在 tsconfig.json 中为其添加自动加载功能：
{
"compilerOptions": {
...
"typesRoot": ["./node_modules/@types", "./types"]
}
}
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug 。
总结
以上所述是小编给大家介绍的在 Vue 中使用 JSX 及使用它的原因浅析，希望对大家有所帮助！
