Vue 中 computed、methods、watch三者的区别

computed（计算属性）

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

computed 实例

<p>computed={{sumab}}</p>
<p>computed={{sumab}}</p>

computed: {
  sumab: function () {
    console.log('这是cpmputed实现的a+b处理')
    return Number(this.a) + Number(this.b)
  }
}

注意：当页面多次调用sunmab可以看到控制台只会输出一次日志‘这是cpmputed实现的a+b处理’

methods（方法）

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

methods 实例

<p>methods={{sumabs()}}</p>
<p>methods={{sumabs()}}</p>

methods: {
  sumabs () {
    console.log('这是methods实现的a+b处理')
    return Number(this.a) + Number(this.b)
  }
}

注意：当页面多次调用sumabs 可以看到控制台会输出多次日志‘这是methods实现的a+b处理’

computed(计算属性) vs methods(方法)

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新执行函数求值。这就意味着只要 a或b 还没有发生改变，多次访问 sumab 计算属性会立即返回之前的计算结果，而不必再次执行函数。 这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖： computed: { now: function () { return Date.now() } }
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

实例

<p>computed={{sumab}}</p>
<p>methods={{sumabs()}}</p>

computed 写法实现

computed: {
  sumab: function () {
    console.log('这是cpmputed实现的a+b处理')
    return Number(this.a) + Number(this.b)
  }
}

methods 写法实现

methods: {
  sumabs () {
    console.log('这是methods实现的a+b处理')
    return Number(this.a) + Number(this.b)
  }
}

总结：数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods

watch（侦听属性）

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

watch 实例

watch: {
  a: function (val) {
    console.log('这是watch a 的处理')
    this.c = Number(val) + this.b
  },
  b: function (val) {
    console.log('这是watch  b  的处理')
    this.c = Number(val) + this.a
  }
}

computed(计算属性) vs watch(侦听属性)

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。当你有一些数据需要随着其它数据的变动而变动时，很容易滥用 watch。 然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

实例

watch 写法实现

watch: {
  a: function (val) {
    console.log('这是watch a 的处理')
    this.c = Number(val) + this.b
  },
  b: function (val) {
    console.log('这是watch  b  的处理')
    this.c = Number(val) + this.a
  }
}

computed 写法实现

computed: {
  c: function () {
    console.log('这是cpmputed实现的a+b处理')
    return Number(this.a) + Number(this.b)
  }
}

总结：watch实现的代码是命令式的和重复的使代码变得复杂。computed 计算属性实现的代码简洁易于页面的维护

 

完整js:

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        a: 1,
        b: 2,
        c: 3
      }
    },
    computed: {
      sumab: function () {
        console.log('这是cpmputed实现的a+b处理')
        return Number(this.a) + Number(this.b)
      },
      c: function () {
        console.log('这是cpmputed实现的a+b处理')
        return Number(this.a) + Number(this.b)
      }
    },
    methods: {
      sumabs () {
        console.log('这是methods实现的a+b处理')
        return Number(this.a) + Number(this.b)
      }
    },
    created () {
    },
    watch: {
      a: function (val) {
        console.log('这是watch a 的处理')
        this.c = Number(val) + this.b
      },
      b: function (val) {
        console.log('这是watch  b  的处理')
        this.c = Number(val) + this.a
      }
    }
  }
</script>