Decorator函數是Vue.js 3中非常棒的特性之一，可以使我們更快速、更整潔地編寫代碼：

import { defineComponent, reactive } from 'vue'
function logger(target, key, descriptor) {
const original = descriptor.value;
if (typeof original === 'function') {
descriptor.value = function (...args) {
console.log(`Invoked ${key} with`, args);
const result = original.apply(this, args);
console.log(`Result ${key} was`, result);
return result;
}
}
return descriptor;
}
export default defineComponent({
setup() {
const state = reactive({
text: '',
});
return {
state,
logText: logger((e) =>console.log(e)),
submitForm() { /* send form */ }
};
},
});

在上面的代碼中，logger是一個包裝器，它返回一個修飾后的version of your code而不影響它的功能。這個logger方法用于打印函數調用的參數和返回值，并可以應用于定義組件中的任何方法。

在setup函數內部，我們使用reactive函數來創建一個可響應的state對象并將其返回到模板中。我們還將logText作為呈現模板中的方法并使用裝飾器修飾它。最后，我們還有一個submitForm函數用于發送表單數據，它沒有被logger裝飾。

在Vue 3的組件中使用decorator函數，可以更好地組織您的代碼。它使代碼更順暢、可讀性更好、更具可維護性。您可以使用它來更好地分離關注點、提高項目的通用性和擴展性。