4.1.2　方法

methods：通過methods對象定義方法，并使用v-on指令來監聽DOM事件。

    <button v-on:click="alert">alert</button>
    new Vue({
       el: '#app',
       data:{ a:1 },
       methods:{
         alert:function(){
         alert(this.a)
         }
       }
     })

自定義事件在初始化的時候傳入events對象，通過實例的$emit方法進行觸發。而在Vue.js 2.0中則廢除了events選項屬性，不再支持事件廣播這類特性，所以直接使用Vue實例的全局方法$on/$emit()，或者使用插件Vuex來處理即可。

通過調用表達式中的methods也可以達到同樣的效果。代碼如下：

提示：不應該使用箭頭函數來定義methods函數。

運行的效果如圖4-3所示。

圖4-3　methods運行效果圖（一）

從最終的結果來看，兩種方式確實是相同的。然而不同的是，計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這意味著，只要message還沒有發生改變，多次訪問reversedMessage計算屬性會立即返回以前的計算結果，而不必再次執行函數。相比而言，只要發生重新渲染，methods調用總會執行該函數。

代碼如下：

運行的效果如圖4-4所示。

圖4-4　methods運行效果圖（二）

提示：假設有一個性能開銷比較大的商城A，它需要遍歷一個極大的數組和做大量的計算，來獲取可能存在的其他商品（賴于A）。如果沒有緩存，將不可避免地多次執行A的getter。如果不希望有緩存，則可以用methods替代。