<template>
? <div>我喜歡<span class="emphasize">前端</span></div>
</template>
小編對這段代碼進行編譯之后蔼囊，得到下面這段代碼
復(fù)制代碼
function () {
? var e = this,
? // e._self._c 對應(yīng)源碼里面的createElement
? t = e._self._c;
? // 返回了一個 createElement('div',[])
? return t("div", [
? ? // e._v 對應(yīng)源碼里面的createTextVNode
? ? e._v("my"),
? ? t("span", { staticClass: "emphasize" }, [e._v("前端")]),
? ]);
}
復(fù)制代碼
通過對上面的代碼進行分析恨闪，不難發(fā)現(xiàn)雁竞，Vue模板中的每一個元素編譯之后都會對應(yīng)一個createElement,那么這個createElement到底是什么柠衅，嗯成翩，這個你面試的時候也許已經(jīng)提到過了败去。
那么什么是createElement
無論是Vue還是React暴构，都存在createElement,而且作用基本一致览爵≈帽牵可能你對createElement不是很了解，函數(shù)名翻譯過來就是增加一個元素蜓竹，但他的返回值你一定知道箕母。createElement函數(shù)返回的值稱之為虛擬節(jié)點，即VNode俱济，而由VNode扎堆組成的樹便是大名鼎鼎嘶是，面試必問的虛擬DOM。
createElement函數(shù)的參數(shù)蛛碌，在這里小編偷個懶抄一下Vue官方文檔
復(fù)制代碼
// @returns {VNode}
createElement(
? // {String | Object | Function}
? // 一個 HTML 標(biāo)簽名聂喇、組件選項對象，或者
? // resolve 了上述任何一種的一個 async 函數(shù)蔚携。必填項授帕。
? 'div',
?
? // {Object}
? // 一個與模板中 attribute 對應(yīng)的數(shù)據(jù)對象「∩遥可選跛十。
? {
? ? // (詳情見下一節(jié))
? },
?
? // {String | Array}
? // 子級虛擬節(jié)點 (VNodes)，由 `createElement()` 構(gòu)建而成秕硝，
? // 也可以使用字符串來生成“文本虛擬節(jié)點”芥映。可選远豺。
? [
? ? '先寫一些文字',
? ? createElement('h1', '一則頭條'),
? ? createElement(MyComponent, {
? ? ? props: {
? ? ? ? someProp: 'foobar'
? ? ? }
? ? })
? ]
)
復(fù)制代碼
從上面可以看出createElement一共有三個參數(shù)奈偏，三個參數(shù)分別是
第一個參數(shù)是需要渲染的組件，可以是組件的標(biāo)簽躯护，比如div惊来；或者是一個組件對象，也就是你天天寫的export default {}棺滞；亦或者可以是一個異步函數(shù)裁蚁。
第二個參數(shù)是這個組件的屬性，是一個對象继准，如果組件沒有參數(shù)枉证，可以傳null（關(guān)于組件的屬性，下文將依次介紹）
第三個參數(shù)是這個組件的子組件移必，可以是一個字符串(textContent)或者一個由VNodes組成的數(shù)組
用createElement寫一個組件吧
表單示例
假設(shè)我們需要開發(fā)一個下面這樣的表格（element-ui的）
img
用模板代碼去開發(fā)
如果我們用模板代碼去開發(fā)這個表單室谚，那么代碼大概就長這樣
復(fù)制代碼
<el-form :inline="true" :model="formInline" class="demo-form-inline">
? <el-form-item label="審批人">
? ? <el-input v-model="formInline.user" placeholder="審批人"></el-input>
? </el-form-item>
? <el-form-item label="活動區(qū)域">
? ? <el-select v-model="formInline.region" placeholder="活動區(qū)域">
? ? ? <el-option label="區(qū)域一" value="shanghai"></el-option>
? ? ? <el-option label="區(qū)域二" value="beijing"></el-option>
? ? </el-select>
? </el-form-item>
? <el-form-item>
? ? <el-button type="primary" @click="onSubmit">查詢</el-button>
? </el-form-item>
</el-form>
復(fù)制代碼
用createElement去實現(xiàn)
如果我們直接將上面的代碼轉(zhuǎn)換為用createElement去實現(xiàn)，那么代碼將會是這樣的
復(fù)制代碼
export default {
? methods: {
? ? $_handleChangeUser(value) {
? ? ? this.formInline.user = value
? ? }
? },
? render(createElement) {
? ? return createElement(
? ? ? 'ElForm',
? ? ? {
? ? ? ? props: {
? ? ? ? ? inline: true,
? ? ? ? ? model: this.formInline
? ? ? ? },
? ? ? ? staticClass: 'demo-form-inline'
? ? ? },
? ? ? [
? ? ? ? createElement(
? ? ? ? ? 'ElFormItem',
? ? ? ? ? {
? ? ? ? ? ? props: {
? ? ? ? ? ? ? label: '審批人'
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? [
? ? ? ? ? ? createElement('ElInput', {
? ? ? ? ? ? ? props: {
? ? ? ? ? ? ? ? value: this.formInline.user
? ? ? ? ? ? ? },
? ? ? ? ? ? ? attrs: {
? ? ? ? ? ? ? ? placeholder: '審批人'
? ? ? ? ? ? ? },
? ? ? ? ? ? ? on: {
? ? ? ? ? ? ? ? input: this.$_handleChangeUser
? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ]
? ? ? ? ),
? ? ? ? createElement(
? ? ? ? ? 'ElFormItem',
? ? ? ? ? {
? ? ? ? ? ? props: {
? ? ? ? ? ? ? label: '活動區(qū)域'
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? [
? ? ? ? ? ? createElement(
? ? ? ? ? ? ? 'ElSelect',
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? props: {
? ? ? ? ? ? ? ? ? value: this.formInline.region,
? ? ? ? ? ? ? ? ? placeholder: '活動區(qū)域'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? [
? ? ? ? ? ? ? ? createElement('ElOption', {
? ? ? ? ? ? ? ? ? props: {
? ? ? ? ? ? ? ? ? ? label: '區(qū)域一',
? ? ? ? ? ? ? ? ? ? value: 'shanghai'
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }),
? ? ? ? ? ? ? ? createElement('ElOption', {
? ? ? ? ? ? ? ? ? props: {
? ? ? ? ? ? ? ? ? ? label: '區(qū)域二',
? ? ? ? ? ? ? ? ? ? value: 'beijing'
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ]
? ? ? ? ? ? )
? ? ? ? ? ]
? ? ? ? ),
? ? ? ? createElement('ElFormItem', null, [
? ? ? ? ? createElement(
? ? ? ? ? ? 'ElButton',
? ? ? ? ? ? {
? ? ? ? ? ? ? props: {
? ? ? ? ? ? ? ? type: 'primary'
? ? ? ? ? ? ? },
? ? ? ? ? ? ? on: {
? ? ? ? ? ? ? ? click: this.$_handleSubmit
? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? '查詢'
? ? ? ? ? )
? ? ? ? ])
? ? ? ]
? ? )
? }
}
復(fù)制代碼
深圳網(wǎng)站建設(shè)www.sz886.com
