学Vue，就要学会vue JSX（二）-CSDN博客

本文链接：https://blog.csdn.net/qq_43623970/article/details/107182469

本文探讨Vue中的JSX语法，通过编译后的代码解析`createElement`的作用。详细介绍了`createElement`的参数及如何用JSX构建组件，以表格组件为例，展示从模板到JSX的转换过程，帮助开发者更好地理解和使用Vue JSX。

摘要由CSDN通过智能技术生成

学习`JSX`,先了解一下`createElement`

提到JSX,不可避免的就要提到createElement,当你看完本节，你会发现，奇怪的知识又增多了。ok，我们接着上一部分继续讲。这一次的准备工作是了解createElement。

从`Vue`编译后的代码看`createElement`

你是否看过写的Vue代码经过编译之后的样子，比如下面这段代码

<template>
  <div>我喜欢<span class="emphasize">前端</span></div>
</template>

小编对这段代码进行编译之后，得到下面这段代码

function () {
   
  var e = this,
  // e._self._c 对应源码里面的createElement
  t = e._self._c;
  // 返回了一个 createElement('div',[])
  return t("div", [
    // e._v 对应源码里面的createTextVNode
    e._v("my"),
    t("span", {
    staticClass: "emphasize" }, [e._v("前端")]),
  ]);
}

通过对上面的代码进行分析，不难发现，Vue模板中的每一个元素编译之后都会对应一个createElement,那么这个createElement到底是什么，嗯，这个你面试的时候也许已经提到过了。

那么什么是`createElement`

无论是Vue还是React，都存在createElement,而且作用基本一致。可能你对createElement不是很了解，函数名翻译过来就是增加一个元素，但他的返回值你一定知道。createElement函数返回的值称之为虚拟节点，即VNode，而由VNode扎堆组成的树便是大名鼎鼎，面试必问的虚拟DOM。

createElement函数的参数，在这里小编偷个懒抄一下Vue官方文档