为了账号安全,请及时绑定邮箱和手机立即绑定

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>


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消