什么是VNode
在vue.js中存在一個VNode類，使用它可以實例化不同類型的vnode實例，而不同類型的vnode實例各自表示不同類型的DOM元素。
例如，DOM元素有元素節點，文本節點，注釋節點等，vnode實例也會對應著有元素節點和文本節點和注釋節點。
VNode類代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
export default class VNode { constructor(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.functionalContext = undefined this.functionalOptions = undefined this.functionalScopeId = 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 } get child() { return this.componentInstance }} |
從上面的代碼可以看出，vnode只是一個名字，本質上來說就是一個普通的JavaScript對象，是從VNode類實例化的對象。我們用這個JavaScript對象來描述一個真實DOM元素的話，那么該DOM元素上的所有屬性在VNode這個對象上都存在對應得屬性。
簡單來說，vnode可以理解成節點描述對象，他描述了應該怎樣去創建真實的DOM節點。
例如，tag表示一個元素節點的名稱，text表示一個文本節點的文本，children表示子節點等。vnode表示一個真實的DOM元素，所有真實的DOM節點都是用vnode創建并插入到頁面中。
VNode創建DOM并插入到視圖
圖中展示了使用vnode創建真實的DOM并渲染到視圖的過程。可以得知，vnode和視圖是一一對應的。我們可以把vnode理解成JavaScript對象版本的DOM元素。
渲染視圖的過程是先創建vnode，然后在使用vnode去生成真實的DOM元素，最后插入到頁面渲染視圖。
VNode的作用
由于每次渲染視圖時都是先創建vnode，然后使用它創建的真實DOM插入到頁面中，所以可以將上一次渲染視圖時先所創建的vnode先緩存起來，之后每當需要重新渲染視圖時，將新創建的vnode和上一次緩存的vnode對比，查看他們之間有哪些不一樣的地方，找出不一樣的地方并基于此去修改真實的DOM。
Vue.js目前對狀態的偵測策略采用了中等粒度。當狀態發生變化時，只通知到組件級別，然后組件內使用虛擬DOM來渲染視圖。
如圖下所示，當某個狀態發生變化時，只通知使用了這個狀態的組件。也就是說，只要組件使用的眾多狀態中有一個發生了變化，那么整個組件就要重新渲染。
如果組件只有一個節點發生了變化，那么重新渲染整個組件的所有節點，很明顯會造成很大的性能浪費。因此，對vnode驚醒緩存，并將上一次的緩存和當前創建的vnode對比，只更新有差異的節點就變得很重要。這也是vnode最重要的一個作用。
VNode的類型
vnode有很多不同的類型，有以下幾種：
注釋節點
- 文本節點
- 元素節點
- 組件節點
- 函數式節點
- 克隆節點
前面介紹了vnode是一個JavaScript對象，不同類型的vnode之間其實屬性不同，準確說是有效屬性不同。因為當使用VNode類創建一個vnode時，通過參數為實例設置屬性時，無效的屬性會默認設置為undefined或者false。對于 vnode身上的無效屬性，直接忽略就好。
1.注釋節點
由于創建注釋節點的過程非常簡單，所以直接通過代碼來介紹它有哪些屬性：
|
1
2
3
4
5
6
|
export const createEmptyVNode = text => { const node = new VNode() node.text = text; node.isComment = true; return node} |
一個注釋節點只有兩個有效屬性 text 和 isComment。其余屬性全是默認undefined或者false。
例如一個真實的注釋節點，所對應的vnode是下面的樣子：
|
1
2
3
4
5
|
// <!-- 注釋節點 -->{ text: "注釋節點", isComment: true} |
2.文本節點
文本節點的創建過程也非常簡單，代碼如下：
|
1
2
3
|
export function createTextVNode(val) { return new VNode(undefined, undefined, undefined, String(val))} |
當文本類型的vnode被創建時，它只有一個text屬性：
|
1
2
3
4
|
{ text: "文本節點"} |
3.克隆節點
克隆節點是將現有節點的屬性賦值到新節點中，讓新創建的節點和被克隆的節點的屬性保持一致，從而實現克隆效果。它的作用是優化靜態節點和插槽節點（slot node）。
以靜態節點為例，當組件內某個狀態發生變化后，當前組件會通過虛擬DOM重新渲染視圖，靜態節點因為它的內容不會改變，所以除了首次渲染需要執行渲染函數獲取vnode之外，后續更新不需要執行渲染函數重新生成vnode。
因此，這是就會使用創建克隆節點的方法將vnode克隆一份，使用克隆節點進行渲染。這樣就不需要執行渲染函數生成新的靜態節點的vnode，從而提升一定的性能。
創建克隆節點的代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
export function cloneVNode(vnode, deep) { const cloned = new VNode(vnode.tag, vnode.data, vnode.children, vnode.text, vnode.elm, vnode.context, vnode.componentOptions, vnode.asyncFactory) cloned.ns = vnode.ns cloned.isStatic = vnode.isStatic cloned.key = vnode.key cloned.isComment = vnode.isComment cloned.isCloned = true if (deep && vnode.children) { cloned.children = cloneVNodes(vnode.children) } return cloned } |
克隆現有節點，只需要將現有節點的屬性全部賦值到新節點中。
克隆節點和被克隆節點位移的區別是isCloned屬性，克隆節點為true，被克隆的原始節點為false。
4.元素節點
元素節點通常會存在以下4中有效屬性。
- tag：tag就是一個節點的名稱，例如 p、ul、li和div等。
- data：改屬性包含了一些節點上的數據，比如attrs、class和style等。
- children：當前節點的子節點列表。
- context：它是當前組件的Vue.js實例
一個真實的元素節點，對應得vnode是下面這樣：
|
1
2
3
4
5
6
7
8
9
|
// <p><span>Hello</span><span>World</span></p>{ children: [VNode, VNode], context: {...}, data: {...}, tag: "p", ...} |
5.組件節點
組件節點和元素節點類似，有以下兩個獨有的屬性。
componentOptions：組件節點的選項參數，其中包含了propsData、tag和children等信息
componentInstance：組件的實例，也就是Vue.js的實例。事實上，在Vue.js中，每個組件都有一個Vue.js實例。
一個組件節點，對應得vnode是下面這樣：
|
1
2
3
4
5
6
7
8
9
|
// <child></child>{ componentInstance: {...}, componentOptions: {...}, context: {...}, data: {...}, tag: "vue-component-1-child", ... } |
6.函數式節點
函數式節點和組件節點類似，他有兩個獨有的屬性functionalContext和functionalOptions。
通常，一個函數式節點的vnode是下面這樣：
|
1
2
3
4
5
6
7
|
{ functionalContext: {...}, functionalOptions: {...}, context: {...}, data: {...}, tag: "div" } |
總結
VNode是一個類，可以生產不同類型的vnode實例，不同類型的實例表示不同類型的真實DOM。
由于Vue.js對組件采用了虛擬DOM來更新視圖，當屬性發生變化時，整個組件都要進行重新渲染的操作，但組件內并不是所有的DOM節點都需要更新，所以將vnode緩存并將當前新生成的vnode和緩存的vnode作對比，只對需要更新的部分進行DOM操作可以提升很多的性能。
vnode有很多類型，它們本質上都是Vnode實例化出的對象，其唯一區別是屬性不同。
到此這篇關于Vue.js之VNode的使用的文章就介紹到這了,更多相關VNode使用內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/qq_42005992/article/details/110131174
