Vue 3是一個現代的JavaScript框架，它以組件為核心，可以幫助開發人員更加有效地編寫Web應用程序。在Vue 3中，編寫組件非常容易，因為它提供了一個簡單但強大的語法。

要編寫Vue 3組件，首先需要創建一個Vue實例。在Vue 3中，可以使用createApp方法來創建一個Vue實例。下面是一個簡單的例子：

const app = Vue.createApp({
data() {
return {
msg: 'Hello, Vue 3!',
};
},
});

在上面的代碼中，我們使用createApp方法來創建了一個Vue實例，并且定義了一個data函數，該函數返回一個包含msg屬性的對象。該屬性可以在組件中使用。

接下來，我們需要定義一個Vue組件。在Vue 3中，可以使用defineComponent方法來定義一個組件。下面是一個簡單的例子：

const HelloWorld = Vue.defineComponent({
template: '<p>{{ msg }}</p>',
data() {
return {
msg: 'Hello, Vue 3!',
};
},
});

在上面的代碼中，我們使用defineComponent方法來定義了一個名為HelloWorld的組件，并指定了一個包含模板的template屬性。該模板使用Mustache語法來顯示msg屬性的值。

最后，我們需要將定義的組件注冊到Vue實例中。在Vue 3中，可以使用component方法來完成這個操作。下面是一個簡單的例子：

app.component('hello-world', HelloWorld);

在上面的代碼中，我們使用component方法將定義的HelloWorld組件注冊到Vue實例中，并指定了一個名為hello-world的標簽名，該標簽可以在組件中使用。

這樣，我們就成功地編寫了一個Vue 3組件，并將其注冊到了Vue實例中。現在，我們可以在頁面中使用該組件并展示它。