在Vue中，組件的渲染是通過render函數來實現的，render函數是一個用來生成渲染結果的函數，它返回一個VNode實例，然后通過Vue進行解析和渲染。

每個組件都擁有一個 render 函數，它是一個返回 VNode 的函數。這個 render 函數接收一個createElement函數作為第一個參數，用于創建VNode節點。

Vue.component('my-component', {
// 在組件內部定義一個 `prop`。
props: ['message'],
// 與 `data` 一樣，prop 可以用在模板內
// 同樣也可以在 vm 實例中像 “this.message” 這樣使用
template: '
{{ message }}
'
})

然后，我們可以使用 Vue 的實例，創建并掛載這個子組件:

當MyComponent的父組件在其 render 函數中渲染 MyComponent 時，Vue 會逐個執行以下操作：

• 調用 MyComponent 的 render 函數。
• MyComponent 的 render 函數返回一個 VNode。
• 這個 VNode 最終會被渲染成真實 DOM。

下面是一個簡單的組件渲染示例，其中我們定義一個Test組件，Test組件中利用render函數創建VNode節點。我們將其掛載在App組件中執行：

Vue.component('Test', {
render: function(createElement) {
return createElement('div', 'Hello World')
}
})
new Vue({
el: '#app',
template: '',
})

這里createElement方法會創建一個 div 節點，同時會傳入文本 "Hello World"，最終返回一個 VNode 實例。使用這個創建的 VNode 來進行渲染。

除此之外，在render函數中，我們還可以用JSX語法來創建VNode節點，它是一種JS的語法擴展。

Vue.component('Test', {
render(h) {
return (
Hello {this.name}!
// 這里使用了JSX語法
)
},
data() {
return {
name: 'Vue'
}
}
})
new Vue({
el: "#app",
template: ''
})

這里使用了JSX語法，在render函數中返回由JSX創建的VNode節點，這會被Vue自動編譯成VNode。通過這種方式，我們可以更快更直觀地創建組件。