Watch监听

侦听器，监听数据的变化,基础用法
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。

1、下面代码是watch的一种简单的用法：

  <div id="app">
    <input type="text" v-model="firstName" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
    el:"#app",
    data:{
        firstName:"张",
        lastName:"王",
        timer:0
    },
    watch:{         
        firstName：(newVal,oldVal){//firstName即为你想监听的数据的名称，要监听谁函数名就用谁的  如监听 v-model的firstName                    
                                               //newVal：表示改变后的值，即第一个形参，不要调换位置
                                              //oldVal：表示改变前的值，
                    console.log({newVal,oldVal});//{newVal: "陈", oldVal: "张"}
          }
          //直接写一个监听处理函数，当每次监听到cityName值发生改变时，执行函数。
          //也可以在//所监听的数据后面直接加字符串形式的方法名：
          firstName: 'nameChange'
     },
    methods:{
        nameChange(){

            }
       }
 })
 vm.firstName = "陈"；//改变监听的值
</script>

2、immediate

使用watch基本用法时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

父组件
<div>
  <fincat :tableData="tableData" :detailData="detailData" :drugType="drugType" 
  :cause="cause" :recipeDrugData="recipeDrugData"
  :openningDate="openningDate" 
  :packageData="packageData" :allDosage="allDosage"
  :loading.sync="loading"
>
  </fincat>
<div>
<script>
    export default{
      data(){
        return{
         detailData:["11"]
      }
   }
}
</script>
子组件
<script>
    export default {
       name: "financialDetails",
            props :{
            detailData: {
                required: true, // 设置required就不要设置default
                type: Array,
                default: function() {
                    // Array和Object的默认值的设置都是function
                    return [];
            },
        }
        data(){
            return{
                datetable:"",
            }
        },
        watch: {
            detailData: {
                handler: function(new,old) {
                },
                immediate: true
            },
        }
    };
</script>

监听的数据后面写成对象形式，包含handler方法和immediate，上面简单的写法我们写的函数其实就是在写这个handler方法、默认省略而已。
immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

3、handler方法

<div id="app">
    <div>
        <p>Number: {{ myNumber }}</p>
        <p>Number: <input type="text" v-model.number="myNumber"></p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        myNumber: 'Dawei'
    },
    watch: {
        myNumber: {
            handler(newVal, oldVal) {
                console.log('newVal', newVal);
                console.log('oldVal', oldVal);
            },
            //immediate为true时则立即触发回调函数；如果为false，则和上面的例子一样，不会立即执行回调。
            immediate: true
          }
      }
 })
</script>
//handler方法就是你watch中需要具体执行的方法；

4、 deep属性

对于对象或者对象中的属性，我们如何监听？那么就介绍deep属性。它的作用就是解决这个问题的关键。

<div id="app">
    <div>
        p>Obj-a: {{ obj.a }}</p>
        <p>Obj-a: <input type="text" v-model="obj.a"></p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
          obj: {
            a: ''
       }
 },
//写法一
    watch: {
        obj': {
            handler(newVal, oldVal) {
                    console.log('newVal-obj.a', obj.a);
                    console.log('oldVal-obj.b', obj.a);
                },
                deep: true
            }
        }
 //写法二
     watch: {
        'obj.a': { // <--重点看这里
               handler(newVal, oldVal) {
                    console.log('newVal-obj.a', obj.a);
                    console.log('oldVal-obj.b', obj.a);
                  },
                deep: true
              }
       } 
})
</script>
deep顾名思义就是深入监听，也就是在对象中层层遍历，并在监听对象上的每一个属性上都添加监听，固然也会损耗性能。

通过watch监听可以获取到父组件传给子组件的数据，但是通过钩子函数是获取不到的，

父组件
<div>
   <fincat  :detailData="detailData" 
   :loading.sync="loading"
  >
  </fincat>
<div>
<script>
export default{
  data(){
     return{
       detailData:["11"],
       loading:" "
      }
   }
}
</script>
子组件
<script>
export default {
       name: "financialDetails",
            props :{
            detailData: {
                required: true, // 设置required就不要设置default
                type: Array,
                default: function() {
                    // Array和Object的默认值的设置都是function
                    return [];
                },
             loading: {
                 required: true, // 设置required就不要设置default
                 type: Boolean
            }
        }
        data(){
            return{
                datetable:"",
                listLoading :""
            }
        },
        watch: {
              //监听夫传子过来的loading状态，：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
              //这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。，如果此时直接用loading用于组件的v-model的话
             //会导致子组件改变父组件的数据，导致报错'Avoid mutating a prop directly since the value will be overwritten whenever'，
             //所以用watch监听和computer
            loading: {//监听夫传子过来的loading状态
                handler: function(val) {
                    this.listLoading = val;
                },
                deep: true
            },
            detailData: (neWDetailData,oldval) => {//neWDetailData改变后的值，即第一个形参，不要调换位置改变前的值
                this.datetable = neWDetailData;
            }
        },
        //但是通过钩子函数是获取不到的，父组件传给子组件的数据的
        mounted() {
            console.log(this.detailData);
        }
    };
</script>

监听router变化的例子

watch:{  //to要去的组件   from要离开的组件
  "$route":function(to,from) {  
     if(to.name =="articleDetail"){     
        this.isShow = false
    }else{
        this.isShow = true
       }
    }
 }

watch监听computer

computed: {
    f1() {
        return this.$store.state.xxxx
  },
   ...mapState({
        selectedAddressInfo: "selectedAddressInfo",
    }),
},
//监听计算属性
watch: {
    f1(curVal, oldVal) {
          //这里的curVal就是需要监听的值
    },
    selectedAddressInfo:{
      handler(val) {
          console.log("val",val)
          this.addressInfo = { ...val };
          },
           immediate: true
        },
    }
}

watch监听数组

data() {
 return {
 　　winChips: new Array(11).fill(0)
 }
},
watch: {
  winChips: {
　handler(newValue, oldValue) {
　  for (let i = 0; i < newValue.length; i++) {
　　if (oldValue[i] != newValue[i]) {
    　　console.log(newValue)　　　　　　　　
     }
　 }
   },　
  }
}

data () {
    return {
        demo: [1,2]
    }
},　mounted (){
　　　　window.myVue = this
　},watch: {
    demo(val){
        console.log(val)
    }
},

myVue.demo.push(3)  //[1,2,3]

2.watch 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：myVue.demo[1] = 5
当你修改数组的长度时，例如：myVue.demo.length = 2
这时候你可以删除原有键，再 set(myVue.demo,0,8) // [8,2,3]
3.更复杂一点，你想对数组嵌套对象进行监听的时候，这时就需要深度监听

data () {
    return {
        demo:[
             {
                  name:'张三',
                  age:18
             },　　　　　　　　{
                  name:'李四',
                  age:20
             }
        ]
    }
},
mounted (){
　　window.myVue = this
},
watch: {
    demo: {
      handler (val) {
        console.log(val)
      },
      // 这里是关键，代表递归监听 demo 的变化
      deep: true
    }
},

myVue.demo[0].age = 30  //[{name:'张三',age:30},{name:'李四',age:20}]

4、对象具体属性的watch［活用computed］
data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　} 
  }
},
computed: {
　　pokerHistory() {
　　　　return this.bet.pokerHistory
　　}
},
watch: {
　　pokerHistory(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}
5、watch和computed各自处理的数据关系场景不同

watch擅长处理的场景：一个数据影响多个数据computed擅长处理的场景：一个数据受多个数据影响
6、method和computed触发条件不同computed只提供了缓存的值，而没有重新计算只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。而methods下的数据，是每次都会进行计算的

8. 特别注意

ES6中推出了箭头函数，上述例子我均未使用箭头函数，如果在handler函数中使用了箭头函数，改变了this指向，就无法获取到Vue实例，则为undifined。所以在这不要用箭头函数，如果用， let that = this.
对于父子组件传参，异步获取数据有时会存在获取不到值的情况。这时候watch就派上用场，适当的时候要配合immediate或者deep属性配合使用。

监听表单对象的坑：

  <van-form @submit="addOrEdit">
    <div class="public_main bgw">
      <div class="flex bb1 mr15 ml15">
        <div class="w20 tal aic flex fwb f13">真实姓名</div>
        <van-field
          v-model="form.name"
          class="flex1 pt14 pb14"
          :rules="[{ required: true, message: '请输入就诊人姓名' }]"
          placeholder="请输入就诊人姓名"
        />
      </div>
      <div class="flex bb1 mr15 ml15">
        <div class="w20 tal aic flex fwb f13">身份证号</div>
        <van-field
          v-model="form.idCard"
          class="flex1 pt14 pb14"
          @input="calculateBirthdate"
          placeholder="请输入身份证号码"
          :rules="[
            { required: true, message: '请输入身份证号码' },
            {
              validator: util.validate.idCardAll,
              message: '请输入正确的身份证号码',
              trigger: 'onChange',
            },
          ]"
        />
      </div>
    </div>
  </van-form>

js

//当表单的初始值只要对象form初始值
data(){
return:{
    form:{}
  }
}

  watch: {
    //监听身份证
    "form.idCard": {
      handler(newVal, oldVal) {
        // console.log(newVal);
        console.log(oldVal);
        //大陆身份证号码校验
        var isMatch = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        //香港身份证号码校验
        //开头一位或两位大写字母，然后接上6-10位数字，最后一位数字或字母校验
        var isMatchHongKong = /^[A-Z]{1,2}[0-9]{6,10}[0-9A-Z]$/;
        //澳门身份证号码校验
        //开头数字1或者5或者7，然后接上6位数字，再接上一位数字或者大写字母校验
        var isMatchAoMen = /^[1|5|7][0-9]{6}[0-9A-Z]$/;
        //台湾身份证号码校验
        //开头一位小写或者大写字母，接上9位数字
        var isMatchTaiWan = /^[a-zA-Z][0-9]{9}$/;
        if (isMatch.test(newVal)) {
          this.isDaluIdCard = true;
        } else if (
          isMatchHongKong.test(newVal) ||
          isMatchAoMen.test(newVal) ||
          isMatchTaiWan.test(newVal)
        ) {
          this.isDaluIdCard = false;
          this.form.birthDate = null;
//新增的时候，如果这里第一次赋值表单idcard(其实不能说是赋值，应该是定义赋值)，而且用了深度监听，deep: true,
//当输入name,此时name也是第一次赋值表单name了(其实不能说是赋值，应该是定义赋值)，表单属性的定义，会更新到整个表单，导致form.idCard也被监听了，就算form.idCard的值没变，也会指向form.idCard监听的代码，因为一开始form并没有定义idcarda和name,但是如果把deep: true去掉，就不会出现该问题，
//所以表单对象的属性最好还是一开始就定义好，form:{name:"",idCard:"},就不会出现该问题，编辑的时候每个属性都定义赋值了，所以就不会出现这种情况
          // this.$set(this.form, "birthDate", null);
        } else {
          this.isDaluIdCard = true;
        }
      },
      // deep: true,
    },
  },

v-model也是通过$set(修改值的)