Vue的watch进阶

watch进阶

从我们刚开始学习vue的时候，对于侦听属性，都是简单地如下面一般使用：

watch:{
	a(){
	 //doSomething
	}
}

实际上，vue对watch提供了很多进阶用法。

handler函数

以对象和handler函数的方式来定义一个监听属性，handler就是处理监听变动时的函数：

watch:{
	a:{
		handler:'doSomething'
	}
},
methods:{
	doSomething(){
		//当 a 发生变化的时候，做些处理
	}
}

handler有啥用？是多此一举么？用途主要有两点：

• 将处理逻辑抽象出去了，以method的方式被复用
• 给定义下面两个重要属性留出了编写位置

deep属性

不知道你注意到了没有？

当watch的是一个Object类型的数据，如果这个对象内部的某个值发生了改变，并不会触发watch动作！

也就是说，watch默认情况下，不监测内部嵌套数据的变动。但是很多情况下，我们是需要监测的！

为解决这一问题，就要使用deep属性：

watch:{
	obj:{
		handler:'doSomething',
		deep:true
	}
},
methods:{
	doSomething(){
		//当 obj 发生变化的时候，做些处理
	}
}

deep属性默认为false，也就是我们常用的watch模式。

immediate属性

watch 的handler函数通常情况下只有在监听的属性发生改变时才会触发。

但有些时候，我们希望在组件创建后，或者说watch被声明和绑定的时候，立刻执行一次handler函数，这就需要使用immediate属性了，它默认为false，改为true后，就会立刻执行handler。

watch:{
	obj:{
		handler:'doSomething',
		deep:true,
		immediate:true
	}
},
methods:{
	doSomething(){
		//当 obj 发生变化的时候，做些处理
	}
}

同时执行多个方法

使用数组可以设置多项，形式包括字符串、函数、对象

  watch: {
    // 你可以传入回调数组，它们会被逐一调用
    a: [
        
      'handle1',
        
      function handle2 (val, oldVal) { /* ... */ },
        
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
        
    ],
    
  }