Vue 中 createElement 使用實(shí)例詳解
Vue 提供了createElement 來(lái)創(chuàng)建虛擬dom,方便我們來(lái)函數(shù)化的方式來(lái)定義復(fù)雜的組件結(jié)構(gòu)。在組件定義的時(shí)候,通常render函數(shù)的參數(shù)里都會(huì)帶上該函數(shù)的引用。方便用戶調(diào)用。
一:參數(shù)說(shuō)明
createElement 默認(rèn)暴露給用戶傳遞3個(gè)參數(shù),參考文檔代碼介紹:
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一個(gè) HTML 標(biāo)簽名、組件選項(xiàng)對(duì)象,或者
// resolve 了上述任何一種的一個(gè) async 函數(shù)。必填項(xiàng)。
'div',
// {Object}
// 一個(gè)與模板中屬性對(duì)應(yīng)的數(shù)據(jù)對(duì)象??蛇x。
{
// (詳情見(jiàn)下一節(jié))
},
// {String | Array}
// 子級(jí)虛擬節(jié)點(diǎn) (VNodes),由 `createElement()` 構(gòu)建而成,
// 也可以使用字符串來(lái)生成“文本虛擬節(jié)點(diǎn)”??蛇x。
[
'先寫一些文字',
createElement('h1', '一則頭條'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
二:使用示例
//創(chuàng)建一個(gè)div節(jié)點(diǎn)
createElement("div", {
return createElement("div", {
domProps: {
innerHTML: "hello !"
}
})
})
// 按照組件名來(lái)返回一個(gè)虛擬dom
createElement("component-name", {
props: {
name: "hello"
}
})
// 設(shè)置子對(duì)象
return createElement("div", {
class: "box"
}, [
createElement("span", {
domProps: {
innerHTML: 'bob !'
}
})
])
三:源碼解讀
createElement 最終是通過(guò)調(diào)用new VNode 來(lái)創(chuàng)建虛擬dom,函數(shù)在調(diào)用new VNode之前處理了很多限制的情況,比如:data不能是響應(yīng)式數(shù)據(jù),tag是否為空等等,詳見(jiàn)下面代碼中的中文注釋
function _createElement (
context,
tag,
data,
children,
normalizationType
) {
if (isDef(data) && isDef((data).__ob__)) { //檢測(cè)是否是響應(yīng)式數(shù)據(jù)
warn(
"Avoid using observed data object as vnode data: " + (JSON.stringify(data)) + "\n" +
'Always create fresh vnode data objects in each render!',
context
);
return createEmptyVNode()
}
// object syntax in v-bind
if (isDef(data) && isDef(data.is)) { //檢測(cè)data中是否有is屬性,是的話tag替換為is指向的內(nèi)容,處理動(dòng)態(tài)組件
tag = data.is;
}
if (!tag) { // tag如果為空,創(chuàng)建空虛擬節(jié)點(diǎn)
// in case of component :is set to falsy value
return createEmptyVNode()
}
// warn against non-primitive key
if (isDef(data) && isDef(data.key) && !isPrimitive(data.key) // data 中的key如果定義了必須是數(shù)字或者字符串
) {
{
warn(
'Avoid using non-primitive value as key, ' +
'use string/number value instead.',
context
);
}
}
// support single function children as default scoped slot
if (Array.isArray(children) &&
typeof children[0] === 'function'
) {
data = data || {};
data.scopedSlots = { default: children[0] };
children.length = 0;
}
// 標(biāo)準(zhǔn)化處理children的兩種模式
if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children);
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children);
}
var vnode, ns;
if (typeof tag === 'string') {
var Ctor;
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag);
if (config.isReservedTag(tag)) { // 判讀是否是標(biāo)準(zhǔn)的html 標(biāo)簽
// platform built-in elements
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
);
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {// 如果tag對(duì)應(yīng)的是組件名,創(chuàng)建組件
// component
vnode = createComponent(Ctor, data, context, children, tag);
} else {
// unknown or unlisted namespaced elements
// check at runtime because it may get assigned a namespace when its
// parent normalizes children
vnode = new VNode(
tag, data, children,
undefined, undefined, context
);
}
} else {
// direct component options / constructor
vnode = createComponent(tag, data, context, children);
}
if (Array.isArray(vnode)) {
return vnode
} else if (isDef(vnode)) {
if (isDef(ns)) { applyNS(vnode, ns); }
if (isDef(data)) { registerDeepBindings(data); }
return vnode
} else {
return createEmptyVNode()
}
}
如下是VNode構(gòu)造函數(shù),包含了一個(gè)虛擬dom應(yīng)該有的所有屬性,虛擬dom是現(xiàn)代框架比較大的一個(gè)特色,不僅提高了dom渲染的效率,而且為跨平臺(tái)提供了很好的標(biāo)準(zhǔn)。
var VNode = function VNode (
tag,
data,
children,
text,
elm,
context,
componentOptions,
asyncFactory
) {
this.tag = tag;
this.data = data;
this.children = children;
this.text = text;
this.elm = elm;
this.ns = undefined;
this.context = context;
this.fnContext = undefined;
this.fnOptions = undefined;
this.fnScopeId = undefined;
this.key = data && data.key;
this.componentOptions = componentOptions;
this.componentInstance = undefined;
this.parent = undefined;
this.raw = false;
this.isStatic = false;
this.isRootInsert = true;
this.isComment = false;
this.isCloned = false;
this.isOnce = false;
this.asyncFactory = asyncFactory;
this.asyncMeta = undefined;
this.isAsyncPlaceholder = false;
};
到此這篇關(guān)于Vue 中 createElement 使用詳解的文章就介紹到這了,更多相關(guān)vue createElement使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于vue中對(duì)window.openner的使用指南
opener屬性是一個(gè)可讀可寫的屬性,可返回對(duì)創(chuàng)建該窗口的Window對(duì)象的引用,下面這篇文章主要給大家介紹了關(guān)于vue中對(duì)window.openner使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
使用Vue 實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能
本文章主要來(lái)介紹一下第一個(gè)階段,也就是前端校驗(yàn)的驗(yàn)證碼的實(shí)現(xiàn),下面來(lái)介紹一下拖動(dòng)驗(yàn)證碼的具體實(shí)現(xiàn)。這篇文章主要介紹了利用 Vue 實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼,需要的朋友可以參考下2019-06-06
element-plus按需引入后ElMessage與ElLoading在頁(yè)面中的使用
這篇文章主要介紹了element-plus按需引入后ElMessage與ElLoading在頁(yè)面中的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
vuedraggable實(shí)現(xiàn)簡(jiǎn)單拖拽功能
這篇文章主要為大家詳細(xì)介紹了vuedraggable實(shí)現(xiàn)拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04

