Vue: computed和watch

一、监听属性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)