Vue.js有一个简单的API和几个用于在我们的组件中定义HTML模板的选项。我们可以使用标签选项，在根组件实例上定义模板属性，或者使用单文件组件。上面的选项很棒并且可以完美地工作，但是，在您的应用程序的生命周期中，它们有时会让人感到笨拙、过度设计或非常不灵活。那么，为什么我们使用JSX而不是其他模板定义呢？JSX的可读性更强，写法也比this.$createElement('div',{},[…])简洁很多。JSX也是JavaScript。Vue支持JSX。JSX使自定义Vue组件更易于导入和管理。介绍让我们从一个例子开始来说明为什么JSX是好的。我们想要构建一个组件，它可以是普通的单行文本输入或多行输入（textarea）。我们的模板声明可能看起来像这样。typeof10;//=>'number'typeof'Hello';//=>'string'typeoffalse;//=>'boolean'typeof{a:1};//=>'object'typeofundefined;//=>'undefined'typeofSymbol();//=>'symbol'从上面的代码片段可以看出，我们很快就会遇到一些问题，比如代码重复等等。想象一下必须支持上面列出的输入的各种属性。上面的这个小片段将会增长并成为无法维护的噩梦。为了解决这个问题，我们需要使用Vue来进行降级处理，所以我们需要使用接近Vue的内部API来解决这个问题。render()方法注意：这并不是说没有JSX就没有一种简单的方法来处理上述问题，只是将此逻辑移动到render()方法与JSX使组件更直观。我们在Vue中创建的每个组件都有一个render方法。这是Vue选择渲染组件的地方。即使我们不定义这个方法，Vue也会为我们做。这意味着当我们在Vue中定义一个HTML模板时，Vue的模板编译器将其编译成一个createElement函数，该函数接受一些参数并返回render函数的结果。为了修复上一节中的代码，我们删除了模板属性或模板标签，并在组件上定义了render()方法。如果在组件上定义了渲染方法，Vue将忽略模板定义。classCat{}constmyCat=newCat();myCatinstanceofCat;//=>true上面的代码做了几件事：render方法从Vue获取一个createElement助手。我们以编程方式定义我们的标签。然后，我们创建标签并将其属性、类等作为对象传递。我们可以将许多选项传递给createElement。我们返回新创建的元素进行渲染。我们为Vue组件定义的每个模板都将转换为返回createElement函数的渲染方法。因此，渲染方法将优先于模板定义。例如：//HTML

模板编译器会将上面的HTML转换为：...render(createElement){returncreateElement('div',{},createElement('p',{},'Onlyyoucanstopforestfires'))}...现在您可能会问这个问题：“这对可读性不利吗？”答案是肯定的。一旦我们定义了一个具有多层元素嵌套或多个同级元素的组件，我们就会遇到这个新问题。这就是JSX的用武之地，它是解决这类问题的好方法。什么是JSXJSX是Facebook的工程团队创造的一个术语。JSX是JavaScript的类XML语法扩展，没有任何定义的语义。JSX不打算由引擎或浏览器实现。相反，我们将使用像Babel这样的转置器将JSX转换为常规JS。//这一行是JSX的例子constheading=

WelcometoScotch

;基本上，JSX允许我们在JS中使用类似Html的语法。配置Vue使用JSX如果使用大于等于3.0版本的Vue-cli，可以直接使用JSX语法。如果您使用的是不支持JSX的旧版本Vue-cli，您可以通过安装babel-preset-vue-app并将其添加到您的.babelrc文件中来添加它。#Usingnpmnpminstall--save-devbabel-preset-vue-app#Usingyarnyarnadd--devbabel-preset-vue-app在.babelrc文件中，添加：{"presets":["vue-app"]}我们现在可以添加该组件在渲染功能中使用JSX。将JSX与Vue结合使用时需要牢记的事项要在JSX中监听事件，我们需要“on”前缀。例如，将onClick用于点击事件。render(createElement){return()}要修改事件，请使用render(createElement){return()}绑定变量，注意这里不是使用：render(createElement){return()}将HTML字符串设置为元素的内容，而是使用domPropsInnerHTML使用v-htmlrender(createElement){return()}我们还可以扩展一个大对象：render(createElement){return()}在渲染中使用JSX返回到我们原来的“TextField”组件。现在我们在Vue应用程序中启用了JSX，我们现在可以这样做了。render(createElement){constinputAttributes={class:'input-fieldhas-outline',//classdefinitiononClick:this.handleClick//eventhandlerbackdrop:false//customprop}constinputMarkup=this.multiline?:returninputMarkup}导入VueJS组件在Vue中使用JSX的另一个好处是我们不再需要注册我们需要的每个组件。我们只是导入和使用。import{Button}from'../components'exportdefault{render(createElement){returnEdit}}如何使JSX与TypeScript一起工作TypeScript被用作添加类型检查的一种方式到JavaScript机制。为了在JSX中支持TypeScript，需要修改tsconfig.json。要在TypeScript中启用JSX，首先将文件保存为.tsx文件，然后修改tsconfig.json以包括：{"compilerOptions":{...."jsx":"preserve",}}jsxoptions的设置“保留”意味着TypeScript不应处理JSX。这样做可以让Babel控制所有JSX和TypeScript持久化类型，因为它还不支持VueJSX。然后在你的项目中创建一个jsx.d.ts文件，并为Vue添加TypeScriptJSX声明。importVue,{VNode}from'vue'declareglobal{namespaceJSX{interfaceElementextendsVNode{}interfaceElementClassextendsVue{}interfaceElementAttributesProperty{$props:{}}interfaceIntrinsicElements{[elemName:string]:any}}}确保TypeScript可以加载声明文件。或者，您可以通过以下方式在tsconfig.json中为其添加自动加载功能：{"compilerOptions":{..."typesRoot":["./node_modules/@types","./types"]}}