最近在專案上需要一個資訊彈窗，來顯示資訊，一開始只讓它彈出了文字，而且只有一條資訊，而給我的需求是多條文字和圖片，而后我使用了element ui中的 Notification 通知組件來顯示，當然，基礎的 Notification 還不行，所以我使用了具有 HTML 片段的 Notification ，以及搭配 Vue 中的 h() 函式一起來使用，
下面是element ui 中給出的 Notification 組件（具有 HTML 片段的 Notification ），
1 ElNotification({ 2 title: 'HTML String', 3 dangerouslyUseHTMLString: true,//是否將 message 屬性作為 HTML 片段處理 4 message: '<strong>This is <i>HTML</i> string</strong>',//正文內容 5 })
而要完成我的需求，只需在 Notification 的正文內容使用 h() 函式即可，
當我使用 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 的文章）
VNode ：
在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實體化出的物件，其唯一區別是屬性不同，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/519397.html
標籤：其他
上一篇：面試 個人摸底監測 考察考察JS三座?? 1. 原型和原型鏈 2. 作?域與閉包 3. 異步和單執行緒 （第四天）