如何在Vue中使用JSX以及为什么。/qq44924588...已收录，更多往期好评文章已归类，我的文档和教程资料也整理了很多。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。Vue.js有一个简单的API和几个用于在我们的组件中定义HTML模板的选项。我们可以使用标签选项，在根组件实例上定义模板属性，或者使用单文件组件。上面的选项很棒并且可以完美地工作，但是，在您的应用程序的生命周期中，它们有时会让人感到笨拙、过度设计或非常不灵活。那么，为什么我们使用JSX而不是其他模板定义呢？JSX更易于阅读。的写法比this.$createElement('div',{},[...])简洁多了。JSX也是JavaScript。Vue支持JSX。JSX使自定义Vue组件更易于导入和管理。介绍让我们从一个例子开始来说明为什么JSX是好的。我们要构建一个组件，它可以是普通的单行文本输入，也可以是多行输入（文本区域）。我们的模板声明可能看起来像这样。
从上面的代码片段可以看出，我们很快就会遇到重复代码等问题。想象一下支持上面列出的输入的各种属性。上面的这个小片段将会增长并成为无法维护的噩梦。为了解决这个问题，我们需要使用Vue来进行降级处理，所以我们需要使用接近Vue的内部API来解决这个问题。render()方法注意：这并不是说没有JSX就没有一种简单的方法来处理上述问题，只是将此逻辑移动到render()方法与JSX使组件更直观。我们在Vue中创建的每个组件都有一个render方法。这是Vue选择渲染组件的地方。即使我们不定义这个方法，Vue也会为我们做。这意味着当我们在Vue中定义一个HTML模板时，Vue的模板编译器将其编译成一个createElement函数，该函数接受一些参数并返回render函数的结果。为了修复上一节中的代码，我们删除了模板属性或模板标签，并在组件上定义了render()方法。如果在组件上定义了渲染方法，Vue将忽略模板定义。...exportdefault{name:'TextField',render(createElement){consttag=this.multiline?'textarea':'input'returncreateElement(tag,{class:{'text-input':true,'is-disabled':false},attrs:{name:this.name,placeholder:this.placeholder,'aria-invalid':false}})}}...上面的代码做了几件事：render方法从Vue中获取了一个createElementhelper。我们以编程方式定义我们的标签。然后，我们创建标签并将其属性、类等作为对象传递。我们可以将许多选项传递给createElement。我们返回新创建的元素进行渲染。我们为Vue组件定义的每个模板都将转换为返回createElement函数的渲染方法。因此，渲染方法将优先于模板定义。例如：//HTML模板编译器会将上面的HTML转换为：...render(createElement){returncreateElement('div',{},createElement('p',{},'只有你能阻止森林大火'))}...现在你可能会问这个问题：“这对可读性不好吗？”答案是肯定的。一旦我们定义了一个具有多层元素嵌套或多个同级元素的组件，我们就会遇到这个新问题。这就是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文件中来添加它。#使用npmnpminstall--save-devbabel-preset-vue-app#使用yarnyarnadd--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',//类定义onClick:this.handleClick//事件处理程序backdrop:false//自定义属性}constinputMarkup=this.multiline?:returninputMarkup}导入VueJS组件在Vue中使用JSX的另一个好处是我们不再需要注册每个组件。我们只是导入和使用。import{Button}from'../components'exportdefault{render(createElement){returnEdit}}如何使JSX与TypeScript一起工作TypeScript被用作添加的方式类型检查机制。为了在JSX中支持TypeScript，需要修改tsconfig.json。要在TypeScript中启用JSX，首先将文件保存为.tsx文件，然后修改tsconfig.json以包括：{"compilerOptions":{...."jsx":"preserve",}}jsx选项的设置“保留”意味着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"]}}code可能的部署后的错误无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一下Fundebug，一款好用的bug监控工具。原文：https://scotch.io/tutorials/u...交流文章每周更新。可以微信搜索“大千世界”立即阅读更新（比博客早一两篇），这篇文章GitHubhttps://github.com/qq449245884/xiaozhi已经收录，还有我的很多文档已经整理好了。欢迎明星和完美。可以参考考点面试。另外关注公众号，后台回复福利就可以看到福利了。你知道。
