计算属性（computed）、方法（methods）和侦听属性（watch）是vue.js的三个重要的属性。如果简单的使用计算属性和methods，很多人都认为做的事情都差不多。
计算属性与方法
下面两个代码示例分别用计算属性和方法实现同一个功能：
<!-- 计算属示例 -->
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<script>
// ...
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('');
}
</script><!-- 方法示例 -->
<p>Reversed message: "{{ reversedMessage() }}"</p>
<script>
// ...
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('');
}
}
</script>就上述两个案例而言，我们的分析如下：
我们可以像绑定普通属性一样在模板中绑定计算属性。
计算属性是基于它们的依赖进行缓存的。也就是说，计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着，上述案例中，只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
相反，每当触发重新渲染时，调用方法将总会再次执行函数。
假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
计算属性 VS methods：
computed是基于响应式依赖进行缓存的。何为响应式依赖呢？例如声明在data中的变量既有响应式的性质，用通俗一点的话讲就是，计算属性的触发条件是他的依赖变化了才会重新执行。例如上面的列子一样，只有data中定义的message发生变化了，计算属性才会执行，而且最终返回的事一个结果。而methods就像我们写的普通函数一样，需要我们主动去调用才会执行。而不是依赖数据的变换，并且也不需要返回一个结果，可以仅仅执行一个过程。当我们在获取一个数据时需要对一个大的数组进行大量循环才能获取时，那我们选择计算属性，基于依赖进行缓存那将会节省大量的性能消耗。而不是像methods一样每次调用都执行。
更多web前端开发知识，请查阅 HTML中文网 ！！
以上就是vue.js中methods有什么用？的详细内容，更多请关注易知道|edz.cc其它相关文章！
