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替代。