一、VNodes
Vue的虛擬節點（Virtual Node，縮寫為VNode）是一個JavaScript對象，用於描述DOM節點。與真正的DOM節點不同，在Vue中，VNode是由Vue內部的渲染函數所創建的。當狀態發生改變，Vue需要更新視圖時，會重新創建VNode對象，然後通過比對舊VNode和新VNode，來更新DOM。
一個VNode可以包含如下信息：
{
tag: 'div',
data: {
// VNode數據對象，包含屬性、事件等
},
children: [
// 子VNodes
],
text: 'Hello World!'
}可以看到，一個VNode主要包含三個部分：標籤名、數據（如屬性、事件等）和子節點。一個VNode表示一個DOM節點，可以是標籤節點，也可以是文本節點或注釋節點。在Vue中，每個組件都是對應一個VNode樹。
二、vnode轉html
在Vue中，可以通過render函數來生成VNode樹。但最終還是需要將VNode樹轉換成真正的DOM。Vue提供了一個函數，即renderToString，可以將VNode樹轉換成HTML字符串。
下面是一個使用renderToString生成HTML字符串的例子：
import { createRenderer } from 'vue'// 創建一個渲染器
const renderer = createRenderer()
// 渲染VNode
renderer.renderToString(new Vue({
data() {
return {
message: 'Hello World!'
}
},
render(h) {
return h('div', this.message)
}
}), (err, html) => {
console.log(html) // 輸出 "Hello World!
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/193719.html
微信掃一掃 
支付寶掃一掃 