VUE中function的寫法有很多種，而選擇何種寫法，不僅關(guān)乎代碼的可讀性和可維護性，也關(guān)乎程序的性能和安全性。以下針對常用的VUE function的寫法進行詳細介紹。

最基本的VUE function寫法如下：

methods: {
functionName () {
// function body
}
}

其中，methods對象中定義了計算屬性的function，可以在Vue組件模板中像調(diào)用普通函數(shù)一樣使用。通常情況下，methods中的function會自動綁定this到當(dāng)前Vue實例對象，所以在函數(shù)體中可以訪問Vue實例的props、data、computed和methods等屬性和函數(shù)。

除了定義在methods中，VUE function還可以定義在computed中：

computed: {
functionName () {
// function body
}
}

computed中的function是計算屬性，需要有一個返回值，而且當(dāng)計算屬性所依賴的屬性發(fā)生變化時，相應(yīng)的依賴緩存也會被更新，所以每一次訪問計算屬性時都會重新計算一次。

VUE function還可以定義在watch中：

watch: {
'propName': {
handler (newValue, oldValue) {
// function body
}
}
}

watch中的function是Vue響應(yīng)式數(shù)據(jù)對象中一個屬性的監(jiān)聽器，當(dāng)該屬性發(fā)生變化時，自動調(diào)用相應(yīng)的handler函數(shù)。可以用watch處理用戶輸入、異步請求等涉及到跟蹤Vue實例中特定數(shù)據(jù)變化的場景。

VUE還允許定義箭頭函數(shù)：

methods: {
functionName: () =>{
// function body
}
}

箭頭函數(shù)的語法更加簡潔，也會捕捉當(dāng)前上下文中的this，但綁定上下文時并不會將this指向該組件的Vue實例對象，而是綁定到當(dāng)前函數(shù)所定義的上下文對象中。所以，使用箭頭函數(shù)時需要注意this的指向問題。

最后，還可以采用VUE函數(shù)式組件(Component)的寫法：

Vue.component('component-name', {
functional: true,
props: {...},
render (h, { props, children }) {
// function body, return VNode object
}
})

函數(shù)式組件本質(zhì)上是一個無狀態(tài)函數(shù)，更輕巧、性能更高，但也有一定缺陷，比如不支持生命周期函數(shù)、不支持遞歸調(diào)用等。需要根據(jù)實際情況靈活運用。