VNode虛擬節(jié)點實例簡析
VNode說明&作用
VNode是什么
VNode是JavaScript對象。VNode表示Virtual DOM,用JavaScript對象來描述真實的DOM把DOM標簽,屬性,內容都變成對象的屬性。就像使用JavaScript對象對一種動物進行說明一樣{name: 'Hello Kitty', age: 1, children: null}。
VNode的作用
通過render將template模版描述成VNode,然后進行一系列操作之后形成真實的DOM進行掛載。
VNode的優(yōu)點
- 兼容性強,不受執(zhí)行環(huán)境的影響。
VNode因為是JS對象,不管Node還是瀏覽器,都可以統(tǒng)一操作,從而獲得了服務端渲染、原生渲染、手寫渲染函數等能力。 - 減少操作
DOM,任何頁面的變化,都只使用VNode進行操作對比,只需要在最后一步掛載更新DOM,不需要頻繁操作DOM,從而提高頁面性能。
VNode如何生成
在Vue源碼中,VNode是通過一個構造函數生成的。
export default class VNode {
constructor (
tag?: string,
data?: VNodeData,
children?: ?Array<VNode>,
text?: string,
elm?: Node,
context?: Component,
componentOptions?: VNodeComponentOptions,
asyncFactory?: Function
) {
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
}
}VNode構造函數看起來十分簡單,先走一遍VNode的生成過程。
// 模版
<a href="#" rel="external nofollow" >
generator VNode
</a>
// VNode描述
{
tag: 'a',
data: {
calss: 'demo',
attrs: {
href: '#'
},
style: {
color: 'red'
}
},
children: ['generator VNode']
}這個JS對象,已經囊括了整個模板的所有信息,完全可以根據這個對象來構造真實DOM。
VNode存放哪些信息
- data:存儲節(jié)點的屬性,綁定的事件等
- elm:真實DOM 節(jié)點
- context:渲染這個模板的上下文對象
- isStatic:是否是靜態(tài)節(jié)點
…
VNode存放
在初始化完選項,解析完模板之后,就需要掛載DOM了。此時就需要生成VNode,才能根據 VNode生成DOM然后掛載。創(chuàng)建出來的VNode需要被存起來,主要存放在三個位置:parent,_vnode,$vnode。
后記
VNode虛擬節(jié)點是Vue框架中一個非常重要的概念,深入的學習與了解,有助于進一步加深對Vue框架的理解與運用。
相關文章
前端框架學習總結之Angular、React與Vue的比較詳解
這篇文章主要跟大家分享了關于前端框架中Angular.js、React.js與Vue.js的全方位比較,文章介紹的非常詳細,對大家進行區(qū)分對比這三者之間的差異區(qū)別很有幫助,需要的朋友可以參考借鑒,下面來一起看看吧。2017-03-03

