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

待我称王封你为后i 2021-09-18 08:24 435阅读 0赞

转载自：[https://www.imooc.com/article/49239?block\_id=tuijian\_wz][https_www.imooc.com_article_49239_block_id_tuijian_wz]

## computed（计算属性） ##

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

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

computed 实例

computed={
 {sumab}}
 computed={
 {sumab}}

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 实例

methods={
 {sumabs()}}
 methods={
 {sumabs()}}

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() \} \}  
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

实例

computed={
 {sumab}}
 methods={
 {sumabs()}}

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 写法实现

computed 写法实现

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

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

完整js:

[https_www.imooc.com_article_49239_block_id_tuijian_wz]: https://www.imooc.com/article/49239?block_id=tuijian_wz