vue.js中，什么时候用methods？什么时候用computed?什么时候用watch？

Question

在vue.js中，什么时候用methods？什么时候用computed?什么时候用watch？感觉watch和computed有些类似呢。

Answer 1

methods是个方法，比如你点击事件要执行一个方法，这时候就用methods,
computed是计算属性，实时响应的，比如你要根据data里一个值随时变化做出一些处理，就用computed。
官方文档还是得多看几遍才能更好理解。

Answer 2

文档已经说得很清楚了，文档说明

举一个例子帮助理解：

    <div id="root">
    
    </div>

    <script>

        var vm = new Vue({
            el: '#root',
            data:data,
            methods:{
                method_now(){
                    return Date.now();
                }
            },
            computed:{
                computed_now: function () {
                    return Date.now();
                  }
            }
        })
    </script>

控制台访问:

$vm0.computed_now
1491741921719
$vm0.computed_now
1491741921719
$vm0.computed_now
1491741921719
$vm0.computed_now
1491741921719
$vm0.method_now()
1491741949941
$vm0.method_now()
1491741950734
$vm0.method_now()
1491741951445
$vm0.method_now()
1491741952117

Answer 3

你可以这么理解
methods是方法和原生js没区别，大多是需要我们主动调用（比如事件）。
computed是get 这个get有点特殊，只要触发所依赖数据的set会自动触发get。我们只关心get的return set由系统触发或者依赖的数据触发，官方说依赖缓存只是为了理解。其实Date.now()这种只是系统不能触发set，不能触发set get当然不会通知观察者。
watch 是set 由data触发，我们可以在set里进行自己的条件封装。

Answer 4

我觉得methods必须需要一定的条件去触发,而computed则不需要.

Answer 5

我的想法是如果要传递参数的话使用methods,不需要传递参数的话用computed

Answer 6

https://cn.vuejs.org/v2/guide...

不知道题主有没有我当时的那种困惑，就是当时我一直以为计算属性是一种方法统称，后来才意识到，computed意为计算属性，注意，是属性！！！然后methods意为方法。

这么说吧

var obj = {
    name:'hello',
    shake:function(){}
}

name是obj的成员属性，而shake是obj的成员方法。

而关于 这两者 ，官网也有说到：

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

Answer 7

看字面意思
methods 表示“方式 方法” 也就是视图中需要事件处理的地方 则需要用到methods
比如以下一段代码：

也就是说 在html中需要用到哪个方法 就需要在methods中声明。

Answer 8

我的看法是，按官网的说法computed依赖缓存，如果不需要经常变动的用computed，需要经常变动的用methods。
另外一种情况，如果你需要传参数，就用methods。

Answer 9

一个是需要主动获取一个是被动获取数据 一个不需要你自己通知 一个需要你自己通知

Answer 10

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

好得多了，不是吗？

官方链接：链接