Vue的Element組件庫是前端開發(fā)中非常常用的UI框架之一，Vue Element內(nèi)部用到的虛擬DOM也是VueJS的優(yōu)秀特性之一，正是依靠它的存在才使得VueJS性能變得更出色。而對于Vue Element的虛擬DOM就是vnode。

export default {
render(h) {
return h('div', {
attrs: {
id: 'app'
}
}, [
h('img', {
attrs: {
src: 'https://travis-ci.org/vuejs/vue.svg?branch=dev'
}
}),
h('h1', 'Vue Element'),
h('p', '開箱即用的Vue餓了么UI組件庫'),
h('button', {
on: {
click: this.handleClick
}
}, 'Hello Vue Element!')
])
},
methods: {
handleClick() {
alert('你好 Vue Element！')
}
}
}

上面這段代碼便是一個簡單的Vue Element組件，在其中用到了createElement函數(shù)創(chuàng)建虛擬節(jié)點vnode，最后渲染成真實的DOM。createElement函數(shù)首先傳入要創(chuàng)建的標(biāo)簽名作為參數(shù)，第二個參數(shù)是屬性值，第三個參數(shù)是子元素或者文本節(jié)點，我們使用數(shù)組來存放子元素。組件的最終渲染結(jié)果就是一個dom樹。

使用虛擬節(jié)點vnode，在渲染之前即可進(jìn)行渲染期間的優(yōu)化，而且也可以方便地在其他頁面進(jìn)行DOM復(fù)用。

總之Vue Element是一款非常實用的UI組件庫，充分利用了VueJS的特性，同時也十分方便開發(fā)者使用。