12、Vue侦听器

---

1、Vue侦听器

vue配置对象中的一个属性，侦听属性，它是响应数据变化，这里的数据指的是data和computed中的数据， 相当于监视数据，当数据发生变化时，会立即执行侦听器里边对应的函数。侦听器 watch 是 Vue 提供的一种用来观察和响应 Vue 实例上的数据变化的属性。当被侦听的数据发生变化时，会触发对应的侦听函数。

watch:{
        key:value,
        //key值就是要侦听的数据名字
        //value:5种类型（最常用的也就是函数类型）
        } 

watch的属性名必须要与观察人的名字保持一致; 这样观察的值发生了变化才会触发。

2、value类型

2.1、value为函数类型

当数据变化时，执行的侦听器的回调函数

<div id="app">
       <p>{{msg}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               msg:"zhangjianhua"
           },
           watch:{
               msg:function(newValue,oldValue){
                   console.log(newValue);
                   console.log(oldValue);
                   console.log("侦听到msg发生变化")
               }
           }
       })
    </script>

可以看到，当我们监听msg时，function有两个参数function(newValue,oldValue)，其中newValue指的是msg新传入的值，而oldValue则是msg的原始值。这个是Vue自己创建好的，这两个参数我们可以直接用的。当我们传入一个参数的话，它会默认这个参数为新传入的值。

2.2、value为字符串类型

值为方法名字，被侦听的数据改变时，会执行该方法。

 <div id="app">
       <p>{{msg}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               msg:"zhangjianhua"
           },
           methods:{
               change(){
                   console.log("msg值发生了变化");
               }
           },
           watch:{
               msg:"change"
           }
       })
    </script>

2.3、value为对象类型

对象类型可以提供选项，handler选项
被侦听的数据改变时执行的回调函数，handler:值类型为函数或字符串，字符串是一个方法的名字。

 <div id="app">
       <p>{{msg}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               msg:"zhangjianhua"
           },
           watch:{
               msg:{
                   handler:function(){
                       console.log('侦听到了msg发生了变化')
                   }
               }
           }
       })
    </script>

①deep：
在默认情况下，侦听器侦听对象只侦听引用的变化，只有给对象赋值时它才能被监听到，
当要侦听的数据类型为对象时，需要使用deep选项，可以侦听内部值的变化。设置deep为true，深度监听到每一个数据属性。

 <div id="app">
       <p>{{msgObj}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               msg:"zhangjianhua",
               msgObj:{
                   name:"shuai",
                   age:18
               }
           },
           watch:{
               msgObj:{
                   handler:function(){
                       console.log('可以侦听到msgObj的值吗')
                   },
                   deep:true,
               }
           }
       })

当我们将deep设置为false时，

我们看到此时修改msgObj里面的name属性时，此时是没有被监听的。
②：immediate
加上immediate回调会在侦听开始之后立即被调用，而不是等到侦听的数据更改之后才会调用。默认为false。

3、key类型（键类型）

3.1、正常键值

 //和data中值相同
msg:function(){}

3.2、字符串类型

 'msg.name':function(){
}

字符串类型的key值就解决了深度侦听里边性能消耗的问题。

4、vm.$watch

Vue实例将会在实例化时调用$watch，遍历watch对象的每一个属性。 我们也可以利用vm.$watch来实现侦听。
①：使用vm.$watch含有三个参数形式：

 <div id="app">
       <p>{{msg}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        
       var vm = new Vue({
           el:"#app",
           data:{
               msg:"zhangjianhua",
           },
       })
       vm.$watch(
            "msg",
            function(){
                console.log("msg发生变化了")
            },
            {
                deep:true
            }
        )
    </script>

$watch()中第一个参数：要侦听的数据的名字；第二个参数：数据变化的时候执行的回调函数；第三个参数：选项的对象。
②：使用vm.$watch含有两个参数形式：

 //第一个参数：要侦听的数据的名字；
//第二个参数：选项配置对象
vm.$watch('msg',{
   handler(){ },
   deep:Boolean;
   immedate:Boolean;
})

第一个参数也有别的类型:
第一种类型： 加.的类型（侦听对象属性的变化）

vm.$watch('msgObj.name',{
   handler(){ 
   console.log('name的值改变了')；
 },
   deep:Boolean;
   immedate:Boolean;
})；

第二种类型：函数类型(不常用，侦听的数据由多个数据得到时)

 vm.$watch(function(){
   return this.msg + this.msgObj.name
},{
   handler(){ 
   console.log('name的值改变了')；
 },
 //  deep:Boolean;
  // immedate:Boolean;
})；

5、vm.$watch返回值

侦听器函数执行后，会返回一个取消侦听函数，用来停止触发回调：

const unwatch = vm.$watch('msg', function () {});
unwatch(); // 执行后会取消侦听msg数据

注意：使用unwatch时，在带有immediate时，不能在第一次回调时取消侦听数据。

const unwatch = vm.$watch('msg', function () {
    // xxx代码
    //xxx代码
    ///xxx代码
    unwatch();  // 会报错
  },{
    immediate: true
  }
})

如果要正常使用unwatch，要先检查这个函数的可用性

 var unwatch = vm.$watch('msg', function () {

if(unwatch) {
  unwatch();  
  //return;
}
},{
immediate: true
}
})

举例：

 var unwatch = vm.$watch('msg', function () {

if (unwatch) {
    console.log('hello  Allie')
    unwatch();
   // return;
}
console.log(" hello  Noah")
}, {
immediate: true
})

下图验证了不能在第一次回调时取消侦听数，第二次侦听器函数执行后，会返回一个取消侦听函数，用来停止触发回调：