vue watch中的immediate和deep

一、watch

vm.$watch( expOrFn, callback, [options] )

• 参数：

  • {string | Function} expOrFn
  • {Function | Object} callback
  • {Object} [options]
    • {boolean} deep
    • {boolean} immediate

• 返回值：{Function} unwatch

  从这可以看出，watch是一个对象

二、需求（immediate用法）

搜索框实时搜索关键值

watch: {    // 关键字    fuzzyKey: {      handler() {        this.searchCaseList()      },      immediate: true    }  }

这里用上了immediate：true，说明在 wacth里声明了之后，说明一旦监听到fuzzyKey发生了改变，就会立即先去执行里面的handler方法，再次调用函数，已到达数据实时变化的效果。此外每当我在这里用上immediate：true时，我会将created里调用的this.searchCaseList()删除，这样避免两次调用，相反不用immediate：true，还需要页面初始化的时候调用函数，就要写成以下的形式

watch: {  
  // 关键字   
 fuzzyKey: {     
   handler() {       
     this.searchCaseList()   
   }   
 }
}，
created(){this.searchCaseList()}

还有一种情况是用到watch监听，没有用immediate：true也没有created，类似于

watch: {  
  // 关键字   
 fuzzyKey: {     
   handler() {       
     this.searchCaseList()   
   }   
 }
}

大家也可以试一下，这种结果是这个函数刚开始时是不会调用的，因为只有函数变化才会触发handler函数

三、需求（deep用法）

input框深度监听

<div>
  <input type="text" v-model="person.name" />      <span> {{ person.fullname }} </span></div>
=====script======
data(){
 return {
  person: {        name: 'zhangsan',        lastname: 'lisi',        fullname: ''      }     }
   }   
watch:{
 person:{        handler: function(newValue, oldValue) {        this.person.fullname = newValue.name + '' + this.person.lastname      },      // deep: true,      // immediate: true      }
}

可以看结果是拿不到初始化和变化的值

加上immediate：true

这里是有初始化的值，但是在input框填写值不会发生变化

加上deep：true

这里可以实现随着input输入值的变化发生实时改变

总结：不加deep深度监听和immediate，input框实时变化的值是得不到的，而且初始化的值也不会显现，加上immediate：true，初始化的值会出现，但是在input框中改变值，不会发生改变，只有加上deep：true，span里面的值才会随着input框里面的值变化而实时改变。