如何在Vue中使用JSX进行组件开发？

本文共计1187个文字，预计阅读时间需要5分钟。

JSX是一种扩展于JavaScript的语法，允许在JavaScript代码中直接写XML结构。即JSX=JavaScript + XML，在JavaScript中写XML，使其兼具JavaScript的动态性和HTML的语义化和直观性。

JSX 是什么

JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性

为什么要在 Vue 中使用 JSX

有时候，我们使用渲染函数（render function）来抽象组件，渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的

createElement( 'anchored-heading', { props: { level: 1 } }, [ createElement('span', 'Hello'), ' world!' ] )

其对应的模板是下面：

<anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>

这显然是吃力不讨好的，这个时候就派上 JSX 上场了。