学习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
官方文档
// @returns {VNode}
createElement(