最近在專案上需要一個資訊彈窗，來顯示資訊。一開始只讓它彈出了文字，而且只有一條資訊。而給我的需求是多條文字和圖片，而後我使用了element ui中的 Notification 通知元件來顯示。當然，基礎的 Notification 還不行，所以我使用了具有 HTML 片段的 Notification ，以及搭配 Vue 中的h()函數一起來使用。
下面是element ui 中給出的 Notification 元件（具有 HTML 片段的 Notification ）。而要完成我的需求，只需在 Notification 的正文內容使用 h() 函數即可。
1 ElNotification({ 2 title: 'HTML String', 3 dangerouslyUseHTMLString: true,//是否將 message 屬性作為 HTML 片段處理 4 message: '<strong>This is <i>HTML</i> string</strong>',//正文內容 5 })
當我使用 h() 函數之後：
1 ElNotification({ 2 title: 'HTML String',//標題 3 type: 'warning',//型別 4 offset: 80,//相對螢幕頂部的偏移量 5 customClass: 'temperature',//自定義類名 6 dangerouslyUseHTMLString: true,//是否將 message 屬性作為 HTML 片段處理 7 duration: 5000,//顯示時間 8 message: h('div', [ 9 h('img', { src: item[index].images[index], style: { width: '170px', height: '160px', float: 'left' } }),//插入的圖片 10 h('p', { class: 'userName', style: { color: 'orange', display: 'flex', margin: '0 0 0 15px' } }, '人員姓名：' + item[index].userName + ''),//插入的文字 11 ],)
程式碼寫完了，接下來就講講 h() 函數以及它背後的 VNode (虛擬 DOM 節點 )
什麼是 h() 函數？
Vue官方檔案是這樣解釋的：
Vue 提供了一個 h() 函數用於建立 vnodes。
1 import { h } from 'vue' 2 3 const vnode = h( 4 'div', // type 5 { id: 'foo', class: 'bar' }, // props 6 [ 7 /* children */ 8 ] 9 )
h() 是 hyperscript 的簡稱——意思是「能生成 HTML (超檔案標示語言) 的 JavaScript」。這個名字來源於許多虛擬 DOM 實現預設形成的約定。一個更準確的名稱應該是 createVnode()，但當你需要多次使用渲染函數時，一個簡短的名字會更省力。
h() 函數的使用方式非常的靈活：
1 // 除了型別必填以外，其他的引數都是可選的 2 h('div') 3 h('div', { id: 'foo' }) 4 5 // attribute 和 property 都能在 prop 中書寫 6 // Vue 會自動將它們分配到正確的位置 7 h('div', { class: 'bar', innerHTML: 'hello' }) 8 9 // props modifiers such as .prop and .attr can be added 10 // with '.' and `^' prefixes respectively 11 h('div', { '.name': 'some-name', '^width': '100' }) 12 13 // 類與樣式可以像在模板中一樣 14 // 用陣列或物件的形式書寫 15 h('div', { class: [foo, { bar }], style: { color: 'red' } }) 16 17 // 事件監聽器應以 onXxx 的形式書寫 18 h('div', { onClick: () => {} }) 19 20 // children 可以是一個字串 21 h('div', { id: 'foo' }, 'hello') 22 23 // 沒有 props 時可以省略不寫 24 h('div', 'hello') 25 h('div', [h('span', 'hello')]) 26 27 // children 陣列可以同時包含 vnodes 與字串 28 h('div', ['hello', h('span', 'hello')])
得到的 vnode 為如下形式：
1 const vnode = h('div', { id: 'foo' }, []) 2 3 vnode.type // 'div' 4 vnode.props // { id: 'foo' } 5 vnode.children // [] 6 vnode.key // null
（完整的 VNode 介面包含其他內部屬性，但是強烈建議避免使用這些沒有在這裡列舉出的屬性。這樣能夠避免因內部屬性變更而導致的不相容性問題。）
所以總結下來，使用方法（很簡單）：
h(標籤, {屬性},內容)
h(標籤, {屬性},[可以繼續巢狀h()])
h() 函數已經會使用了，那 VNode 又是什麼呢？（參考自qq_2268846315的文章。VNode 只是挑重點講了下，並沒有講的超級詳細，如有需要請參考 qq_2268846315 的文章）
在vue.js中存在一個VNode類，使用它可以範例化不同型別的vnode範例，而不同型別的vnode範例各自表示不同型別的DOM元素。
例如，DOM元素有元素節點，文位元組點，註釋節點等，vnode範例也會對應著有元素節點和文位元組點和註釋節點。
VNode 的作用：
由於每次渲染檢視時都是先建立vnode，然後使用它建立的真實DOM插入到頁面中，所以可以將上一次渲染檢視時先所建立的vnode先快取起來，之後每當需要重新渲染檢視時，將新建立的vnode和上一次快取的vnode對比，檢視他們之間有哪些不一樣的地方，找出不一樣的地方並基於此去修改真實的DOM。
Vue.js目前對狀態的偵測策略採用了中等粒度。當狀態發生變化時，只通知到元件級別，然後元件內使用虛擬DOM來渲染檢視。
當某個狀態發生變化時，只通知使用了這個狀態的元件。也就是說，只要元件使用的眾多狀態中有一個發生了變化，那麼整個元件就要重新渲染。
如果元件只有一個節點發生了變化，那麼重新渲染整個元件的所有節點，很明顯會造成很大的效能浪費。因此，對vnode驚醒快取，並將上一次的快取和當前建立的vnode對比，只更新有差異的節點就變得很重要。這也是vnode最重要的一個作用。
VNode 的型別：
註釋節點
文位元組點
元素節點
元件節點
函數式節點
克隆節點
總結：
VNode是一個類，可以生產不同型別的vnode範例，不同型別的範例表示不同型別的真實DOM。
由於Vue.js對元件採用了虛擬DOM來更新檢視，當屬性發生變化時，整個元件都要進行重新渲染的操作，但元件內並不是所有的DOM節點都需要更新，所以將vnode快取並將當前新生成的vnode和快取的vnode作對比，只對需要更新的部分進行DOM操作可以提升很多的效能。
vnode有很多型別，它們本質上都是Vnode範例化出的物件，其唯一區別是屬性不同。