Vue: computed和watch

Posted 2022-02-18 长不大的大灰狼

Vue: computed和watch

• • • • 一、监听属性watch
      • 二、计算属性computed

一、监听属性watch

• 不支持缓存，监听的数据变，就会触发；
• 支持异步；
• 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
• 监听数据必须是data中声明过或者父组件传递过来的props中的数据

<div>
  <p>FullName: fullName</p>
  <p>FirstName: <input type="text" v-model="firstName"></p>
</div>

new Vue(
 el: '#root',
 data: 
   firstName: 'hello',
   lastName: 'world',
   fullName: ''
,
watch: 
   firstName(newName, oldName) 
      this.fullName = newName + ' ' + this.lastName;
   

handler方法和immediate属性
immediate: 代表在wacth里声明了firstName这个方法之后立即去执行handler方法

watch: 
 firstName: 
  handler(newName, oldName) 
   this.fullName = newName + ' ' + this.lastName;
  ,
  immediate: true
 

监听对象中的属性变化

watch: 
 'obj.a': 
  handler(newName, oldName) 
   console.log('obj.a changed');
  ,
  immediate: true,
 

二、计算属性computed

• 支持缓存，依赖的数据发生改变，就会重新进行计算；
• 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
• 如果一个属性是由其他属性计算而来的，是一个多对一或者一对一的关系，一般用computed

full_Name= firstName + secName + thirdName
等式右边三个数据任一改变，都会直接修改 full_Name

var vm = new Vue(
 el: '#app',
 data: 
  firstName: 'he',
  secName: 'dong',
  thirdName: 'sheng'
 ,
 computed: 
  full_Name: function () 
   return this.firstName + this.secName + this.thirdName
  
 
)

vm.thirdName = 'ping'
console.log(vm.full_Name)