4.1.2　方法

methods：通過methods對(duì)象定義方法，并使用v-on指令來監(jiān)聽DOM事件。

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

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

通過調(diào)用表達(dá)式中的methods也可以達(dá)到同樣的效果。代碼如下：

提示：不應(yīng)該使用箭頭函數(shù)來定義methods函數(shù)。

運(yùn)行的效果如圖4-3所示。

圖4-3　methods運(yùn)行效果圖（一）

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

代碼如下：

運(yùn)行的效果如圖4-4所示。

圖4-4　methods運(yùn)行效果圖（二）

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