watch监视属性

Vue2监听器网址：计算属性和侦听器 — Vue.js (vuejs.org)

Vue中监听器(watch)用来响应数据的变化。需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch:{
    a:{
        ...
    }
	...
}

一、监事属性

其中a可以是属性、计算属性或者是方法名。a所在对象有handler、immediate、deep等属性。

1. handler:是一个函数。含有连个参数，分别为当前值(newValue)，先前值(lastValue)。

   handler(newValue,lastValue){
       ...
   }

   以下是监听器的使用案例：

   html:
   <div id="app">
       <h1>a的值是：{{a}} </h1>
       <button @click="a++">点击a+1</button>
   </div>

   script:
   new Vue({
       el: '#app',
       data() {
           return {
               a: 1,
           }
       },
       watch: {
           a: {
               handler(newValue, lastValue) {
                   console.log("a被改变了", newValue, lastValue);
               }
           }
       },
   })

   点击按钮后
   控制台：
   a被改变了 2 1

2. immediate：是一个属性，表示一开始自动对该属性进行监听。属性值为true或false，默认为false。

   a:{
   	immediate:true	                   
   }

3. deep：深度监视，也是一个属性，表示对该属性对象内部值进行监测改变。如果属性是一个对象，想要监视它的子属性可以通过对该属性进行深度监视，

   html:
   <div id="app">
       <h1>a的值是：{{numbers.a}} </h1>
       <button @click="numbers.a++">点击a+1</button>
   </div>

   script:
   new Vue({
       el: '#app',
       data() {
           return {
               numbers: {
                   a: 1,
                   b: 1,
               }
           }
       },
       watch: {
           numbers: {
               	deep:true,
               	handler() {
                   console.log("numbers被改变了");
               },
           }
       },
   })

   点击按钮后
   控制台：
   numbers被改变了

二、监视属性简写

在没有immediate和deep属性时可以使用监视属性的简写；

正常写法：
isHot: {
    handler(newValue, oldValue) {
        console.log("isHot被修改了", newValue, oldValue);
    },
},
简写：
isHot(newValue, oldValue) {
    console.log("isHot被修改了", newValue, oldValue);
}

三、监事属性的第二种写法

vm.$watch('a',{
    deep:true/false,
    immediate:true/false,
    handler(newValue, oldValue) {
        ...
    },
})
简写：
vm.$watch('a',function(newValue,oldValue){
    ...
})

总结

监视属性watch ：

1. 当被监视的属性变化时，回调函数自动调月,进行相关操作;
2. 监视的属性必须存在，才能进行监视！ ！
3. 监视的两种写法：
   1. new Vue是传入watch配置；
   2. 通过vm.$watch监视；

深度监视：

1. vue中的watch默认不监测对象内部值的改变 （ 一层 ） 。
2. 配置deep:true可以监测对象内部值改变 （ 多层 ） 。

备注：

1. vue 自身可以监测对象内部值的改变，但 vue 提供的watch默认不可以 ！
2. 使月watch时根据数据的具休结构，决定是否采用深度监视。