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

micstone
  • 1.6k

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

回复
阅读 21.2k
10 个回答
✓ 已被采纳

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

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

举一个例子帮助理解:

    <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

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

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

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

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

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

这么说吧

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

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

而关于 这两者 ,官网也有说到:

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

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

clipboard.png

clipboard.png

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

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

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

计算属性 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
    }
  }
})

好得多了,不是吗?

官方链接:链接

你知道吗?

宣传栏