computed 和watch的区别

210 阅读1分钟

computed和watch是Vue中常用到的两个属性,来看一下它们之间的区别是什么。

computed

computed是一个计算属性,依赖已有值的变化返回计算出的新的结果。这个返回值在页面中可以用{{方法名}}的形式直接调用,和取data对象里的数据属性一样以属性访问的形式调用。

computed 属性值是一个函数,那么默认会走 get 方法,必须要有一个返回值,函数的返回值就是属性的属性值。

template:`
  <h1>{{fullName}}</h1>
`

new vue{
   data:{
     firstName:"xiaoming",
     lastNmae:"jin"
   },
   computed:{
    fullName:function(){
      return this.firstName + '' +this.lastName
    } 
   }
}

并且computed是有缓存功能的,只有当computed依赖的属性发生了变化时,才会重新调用getter功能。

watch

watch会在监听的属性发生变化时调用,相当于发生变化时的callback。watch有两个参数,顺序是(新值,旧值),所以只有一个参数的时候默认是新值。

new vue{
   data:{
     firstName:"xiaoming",
     lastNmae:"jin",
     fullName:''
   },
   
    watch:{
      fisrtName: function(val){
        this.fullName=val+ '' + this.lastName
      }
      lastName:function(val){
        this.fullName=this.firstName + '' + val
      }
    }
}

watch还有deep和immediate两个选项。 为了发现对象内部值的变化,可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。 在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调,即在第一次渲染时也会调用watch。

总结

总的来说:

  • 当只用依赖于某些属性的数据做数据的计算时,使用computed,且computed支持缓存。
  • 当依赖的数据发生变化时还需要做一些其他的操作时,使用watch。官网也说:当需要在数据变化时执行异步或开销较大的操作时,使用watch更好。