computed、methods和watch的区别

243

一、computed 和 methods

computed是计算属性,methods是方法,都可以实现对 data 中的数据加工后再输出。

不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 还没有发生改变,多次访问 reversedMessage(对message 进行加工的处理函数) 计算属性会立即返回之前的计算结果,而不必再次执行函数。而对于method ,只要发生重新渲染,method 调用总会执行该函数。

当有一个性能开销比较大的的计算属性 A ,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ,这时候,我们就需要缓存。也就是使用 computed 而不是 methods。但对于每次都需要进行重新计算的属性比如下面这个函数的返回值 function () { return Date.now() } ,我们最好使用 methods。
总之:数据量大,需要缓存的时候用 computed ;每次确实需要重新加载,不需要缓存时用 methods 。

二、computed 和 watch

  1. Computed是计算属性,类似于过滤器,对绑定到视图的数据进行处理,并监听变化进而执行对应的方法。计算属性是基于他们的依赖进行缓存的。只有在相关依赖发生改变时,它们才会重新求值。

  2. Watch是一个侦听的动作,用来观察和响应Vue实例上的数据变动

  3. 异同:它们都是vue对监听器的实现,只不过computed主要用于对同步数据的处理watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑。能用computed的时候先用computed,避免了多个数据影响其中某个数据时多次调用watch的情况。

  4. 运用场景:当我们需要进行数值计算时,并且依赖于其他数据时,应该使用computed;当我们需要在数据变化时执行异步或者开销较大的操作时,应该使用watch

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName 和 firstName都没有发生改变,多次访问 fullName 计算属性会立即返回之前的计算结果,而不必再次执行函数。

而侦听器 watch 是侦听一个特定的值,当该值变化时执行特定的函数。例如分页组件中,我们可以监听当前页码,当页码变化时执行对应的获取数据的函数。

<div id="myDiv">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>
// watch
new Vue({
  el: '#myDiv',
  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
    }
  }
})
// computed
new Vue({
       el:"#myDiv",
            data:{
                firstName:"Den",
                lastName:"wang",

            },
            computed:{
                fullName:function(){
                    return  this.firstName  + " " +this.lastName;
                }
            }
   })