乐趣区

关于vue.js:Vue的computed和watch的区别是什么

一、computed 介绍

computed 用来监控本人定义的变量,该变量在 data 内没有申明,间接在 computed 外面定义,页面上可间接应用。

// 根底应用
{{msg}}
<input v-model="name" /> 

 // 计算属性 
computed:{msg:function(){return this.name}
}

在输入框中,扭转 name 值得时候,msg 也会跟着扭转。这是因为 computed 监听本人的属性 msg,发现 name 一旦变动,msg 立马会更新。

留神:msg 不可在 data 中定义,否则会报错。

1.1、get 和 set 用法

<input v-model="full" ><br>
<input v-model="first" > <br>
<input v-model="second" > 

data(){
 return{
  first:'美女',
  second:'姐姐'
 }
},
computed:{
 full:{get(){ // 回调函数 当须要读取以后属性值是执行,依据相干数据计算并返回以后属性的值
   return this.first + ' ' + this.second
   },
   set(val){ // 监督以后属性值的变动,当属性值发生变化时执行,更新相干的属性数据
    let names = val.split(' ')
    this.first = names[0]
    this.second = names[1]
  }
 }
}

get 办法:first 和 second 扭转时,会调用 get 办法,更新 full 的值。

set 办法:批改 full 的值时,会调用 set 办法,val 是 full 的最新值。

1.2、计算属性缓存

咱们通过办法,拼接数据,也能够实现该成果,代码如下。

<div> {{full() }} </div>

data(){
 return{
  first:'美女',
  second:'姐姐'
 }
},
methods:{full(){return this.first + ' ' + this.second}
},

一个页面内,数据有可能屡次应用,咱们把 computed 和 method 两个办法放一起实现,并把这个数据在页面内屡次援用,试看以下成果。

<div>
  computed 计算值:{{full}} {{full}} {{full}} {{full}}
</div>

<div>
  methods 计算值:{{fullt}} {{fullt}} {{fullt}} {{fullt}}
</div>

data(){
 return{
  first:'美女',
  second:'姐姐'
 }
},
computed:{full:function(){console.log('computed')
  return this.first + ' ' + this.second
 }
},
methods:{fullt(){console.log('办法')
  return this.first + ' ' + this.second
 }
 }

运行后果为:

依据后果,咱们不难发现,依据办法获取到的数据,应用几次就须要从新计算几次,但计算属性不是,而是基于它们的响应式依赖进行缓存的,之后依赖属性值产生扭转的时候,才会从新计算。因为它计算次数少,所以性能更高些。

二、watch 介绍

watch 是监测 Vue 实例上的数据变动,艰深地讲,就是检测 data 内申明的数据。不仅能够监测简略数据,还能够监测对象或对象属性。

Demo1:监测简略数据

<input v-model="first" > <br>

data(){
 return{first:'美女',}
 },
watch:{first( newVal , oldVal){console.log('newVal',newVal) // first 的最新值
 console.log('oldVal',oldVal) // first 上一个值
 }
},
// 批改 first 的值的时候,立马会打印最新值  

参考 前端进阶面试题具体解答

Demo2:监测对象

监听对象的时候,须要应用深度监听。

<input v-model="per.name">

data(){
 return{
  per:{
   name:'倩倩',
   age:'18'
   }
  }
 },
watch:{
 per:{handler(oldVal,newVal){console.log('newVal',newVal)
   console.log('oldVal',oldVal)
  },
  deep:true,
 }
},

批改 per.name 的时候,发现 newVal 和 oldVal 的值是一样的,是因为他们存储的指针指向的是同一个中央,所以深度监听尽管能够监听到对象的变动,然而无奈监听到具体的是哪个属性发生变化了。

Demo3:监听对象的单个属性

// 办法 1:间接援用对象的属性
<input v-model="per.name">

data(){
 return{
  per:{
   name:'倩倩',
   age:'18'
   }
  }
 },
watch:{'per.name':function(newVal,oldVal){console.log('newVal->',newVal)
   console.log('oldVal->',oldVal)
  }
},

也能够借助 computed 作为两头转换,如下:

// 办法 2:借助 computed
<input v-model="per.name">

data(){
 return{
  per:{
   name:'倩倩',
   age:'18'
   }
  }
 },
watch:{perName(){console.log('name 扭转了')
  }
},
computed:{perName:function(){return this.per.name}
},

Demo4:监听 props 组件传过来的值

props:{mm:String},
// 不应用 immediate
watch:{mm(newV,oldV){console.log('newV',newV)
   console.log('oldV',oldV)
 }
}

// 应用 immediate
watch:{
 mm:{
  immediate:true,
  handler(newV,oldV){console.log('newV',newV)
   console.log('oldV',oldV)
  }
}

不应用 immediate 时,第一次加载页面时,watch 监听的 mm 中的打印并没有执行。

应用 immediate 时,第一次加载时也会打印后果:newV 11 oldV undefined。

immediate 次要作用就是组件加载时,会立刻触发回调函数。

三、两者区别

3.1、对于 computed

  • computed 监控的数据在 data 中没有申明
  • computed 不反对异步,当 computed 中有异步操作时,无奈监听数据的变动
  • computed 具备缓存,页面从新渲染,值不变时,会间接返回之前的计算结果,不会从新计算
  • 如果一个属性是由其余属性计算而来的,这个属性依赖其余属性,个别应用 computed
  • computed 计算属性值是函数时,默认应用 get 办法。如果属性值是属性值时,属性有一个 get 和 set 办法,当数据发生变化时会调用 set 办法。
computed:{
 // 属性值为函数
 perName:function(){return this.per.name},
 // 属性值为属性值
 full:{get(){ },
  set(val){}}
},

3.2、对于 watch

  • 监测的数据必须在 data 中申明或 props 中数据
  • 反对异步操作
  • 没有缓存,页面从新渲染时,值不扭转时也会执行
  • 当一个属性值发生变化时,就须要执行相应的操作
  • 监听数据发生变化时,会触发其余操作,函数有两个参数:
immediate:组件加载立刻触发回调函数
deep:深度监听,次要针对简单数据,如监听对象时,增加深度监听,任意的属性值扭转都会触发。留神:对象增加深度监听之后,输入的新旧值是一样的。

computed 页面从新渲染时,不会反复计算,而 watch 会从新计算,所以 computed 性能更高些。

四、利用场景

当须要进行数值计算,并且依赖于其它数据时,应该应用 computed,因为能够利用 computed 的缓存个性,防止每次获取值时都要从新计算。

当须要在数据变动时执行异步操作或开销较大的操作时,应该应用 watch,computed 不反对异步。如果须要限度执行操作的频率,可借助 computed 作为中间状态。

退出移动版