Vue 3是一個流行的JavaScript框架，它采用了三種不同的模板渲染方式：基于字符串的渲染函數、基于JSX的渲染函數和基于模板的渲染函數。這三種方式都可以用來在Vue 3中創建動態的HTML代碼。下面我們來看一下每種方式的具體實現方法。

第一種模板渲染方式是基于字符串的渲染函數。這種方式使用了一些特殊的字符串語法來表示HTML標簽和屬性，例如：<div v-for="item in list">{{ item }}</div>。這種方式的好處是它可以很方便地組合其他JavaScript代碼，例如if語句和for循環，從而生成動態的HTML結構。

const render = () =>{
return `
{{ item }}
`
}

第二種模板渲染方式是基于JSX的渲染函數。JSX是一種類似HTML的語法，可以在JavaScript中直接編寫HTML代碼。在Vue 3中，我們可以使用Vue的內置函數createElement來創建JSX元素，然后將它們渲染為DOM節點。

const render = () =>{
return (
<div>
{ items.map((item) =>(
<div>{ item }</div>
))}
</div>
);
};

第三種模板渲染方式是基于模板的渲染函數。這種方式使用了一個模板字符串來表示HTML代碼，其中可以嵌入JavaScript代碼。Vue 3的編譯器會將這個模板字符串轉換為渲染函數。

const App = {
data() {
return {
items: [1, 2, 3]
}
},
template: `
<div>
<div v-for="item in items">{{ item }}</div>
</div>
`
}

總而言之，Vue 3提供了三種不同的模板渲染方式，可以根據自己的喜好和項目需求進行選擇?；谧址匿秩竞瘮岛突谀０宓匿秩竞瘮刀己苋菀桌斫夂褪褂茫贘SX的渲染函數則需要對JSX語法有一定的掌握。