Watch監(jiān)聽

偵聽器，監(jiān)聽數(shù)據(jù)的變化,基礎(chǔ)用法
在vue中，使用watch來響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。

1、下面代碼是watch的一種簡(jiǎn)單的用法：
  <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即為你想監(jiān)聽的數(shù)據(jù)的名稱，要監(jiān)聽誰函數(shù)名就用誰的  如監(jiān)聽 v-model的firstName                    
                                               //newVal：表示改變后的值，即第一個(gè)形參，不要調(diào)換位置
                                              //oldVal：表示改變前的值，
                    console.log({newVal,oldVal});//{newVal: "陳", oldVal: "張"}
          }
          //直接寫一個(gè)監(jiān)聽處理函數(shù)，當(dāng)每次監(jiān)聽到cityName值發(fā)生改變時(shí)，執(zhí)行函數(shù)。
          //也可以在//所監(jiān)聽的數(shù)據(jù)后面直接加字符串形式的方法名：
          firstName: 'nameChange'
     },
    methods:{
        nameChange(){

            }
       }
 })
 vm.firstName = "陳"；//改變監(jiān)聽的值
</script>
2、immediate

使用watch基本用法時(shí)有一個(gè)特點(diǎn)，就是當(dāng)值第一次綁定的時(shí)候，不會(huì)執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會(huì)執(zhí)行。如果我們需要在最初綁定值的時(shí)候也執(zhí)行函數(shù)，則就需要用到immediate屬性。

比如當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí)，子組件props首次獲取到父組件傳來的默認(rèn)值時(shí)，也需要執(zhí)行函數(shù)，此時(shí)就需要將immediate設(shè)為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, // 設(shè)置required就不要設(shè)置default
                type: Array,
                default: function() {
                    // Array和Object的默認(rèn)值的設(shè)置都是function
                    return [];
            },
        }
        data(){
            return{
                datetable:"",
            }
        },
        watch: {
            detailData: {
                handler: function(new,old) {
                },
                immediate: true
            },
        }
    };
</script>

監(jiān)聽的數(shù)據(jù)后面寫成對(duì)象形式，包含handler方法和immediate，上面簡(jiǎn)單的寫法我們寫的函數(shù)其實(shí)就是在寫這個(gè)handler方法、默認(rèn)省略而已。
immediate表示在watch中首次綁定的時(shí)候，是否執(zhí)行handler，值為true則表示在watch中聲明的時(shí)候，就立即執(zhí)行handler方法，值為false，則和一般使用watch一樣，在數(shù)據(jù)發(fā)生變化的時(shí)候才執(zhí)行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時(shí)則立即觸發(fā)回調(diào)函數(shù)；如果為false，則和上面的例子一樣，不會(huì)立即執(zhí)行回調(diào)。
            immediate: true
          }
      }
 })
</script>
//handler方法就是你watch中需要具體執(zhí)行的方法；
4、 deep屬性

對(duì)于對(duì)象或者對(duì)象中的屬性，我們?nèi)绾伪O(jiān)聽？那么就介紹deep屬性。它的作用就是解決這個(gè)問題的關(guān)鍵。

<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': { // <--重點(diǎn)看這里
               handler(newVal, oldVal) {
                    console.log('newVal-obj.a', obj.a);
                    console.log('oldVal-obj.b', obj.a);
                  },
                deep: true
              }
       } 
})
</script>
deep顧名思義就是深入監(jiān)聽，也就是在對(duì)象中層層遍歷，并在監(jiān)聽對(duì)象上的每一個(gè)屬性上都添加監(jiān)聽，固然也會(huì)損耗性能。

通過watch監(jiān)聽可以獲取到父組件傳給子組件的數(shù)據(jù)，但是通過鉤子函數(shù)是獲取不到的，

父組件
<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, // 設(shè)置required就不要設(shè)置default
                type: Array,
                default: function() {
                    // Array和Object的默認(rèn)值的設(shè)置都是function
                    return [];
                },
             loading: {
                 required: true, // 設(shè)置required就不要設(shè)置default
                 type: Boolean
            }
        }
        data(){
            return{
                datetable:"",
                listLoading :""
            }
        },
        watch: {
              //監(jiān)聽夫傳子過來的loading狀態(tài)，：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過來則不行。
              //這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。，如果此時(shí)直接用loading用于組件的v-model的話
             //會(huì)導(dǎo)致子組件改變父組件的數(shù)據(jù)，導(dǎo)致報(bào)錯(cuò)'Avoid mutating a prop directly since the value will be overwritten whenever'，
             //所以用watch監(jiān)聽和computer
            loading: {//監(jiān)聽夫傳子過來的loading狀態(tài)
                handler: function(val) {
                    this.listLoading = val;
                },
                deep: true
            },
            detailData: (neWDetailData,oldval) => {//neWDetailData改變后的值，即第一個(gè)形參，不要調(diào)換位置改變前的值
                this.datetable = neWDetailData;
            }
        },
        //但是通過鉤子函數(shù)是獲取不到的，父組件傳給子組件的數(shù)據(jù)的
        mounted() {
            console.log(this.detailData);
        }
    };
</script>

監(jiān)聽router變化的例子

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

watch監(jiān)聽computer

computed: {
    f1() {
        return this.$store.state.xxxx
  },
   ...mapState({
        selectedAddressInfo: "selectedAddressInfo",
    }),
},
//監(jiān)聽計(jì)算屬性
watch: {
    f1(curVal, oldVal) {
          //這里的curVal就是需要監(jiān)聽的值
    },
    selectedAddressInfo:{
      handler(val) {
          console.log("val",val)
          this.addressInfo = { ...val };
          },
           immediate: true
        },
    }
}

watch監(jiān)聽數(shù)組

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 不能檢測(cè)以下變動(dòng)的數(shù)組：
當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：myVue.demo[1] = 5
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：myVue.demo.length = 2
這時(shí)候你可以刪除原有鍵，再 set 一個(gè)新的，這樣就可以觸發(fā)watch myVue.set(myVue.demo,0,8) // [8,2,3]
3.更復(fù)雜一點(diǎn)，你想對(duì)數(shù)組嵌套對(duì)象進(jìn)行監(jiān)聽的時(shí)候，這時(shí)就需要深度監(jiān)聽

data () {
    return {
        demo:[
             {
                  name:'張三',
                  age:18
             },　　　　　　　　{
                  name:'李四',
                  age:20
             }
        ]
    }
},
mounted (){
　　window.myVue = this
},
watch: {
    demo: {
      handler (val) {
        console.log(val)
      },
      // 這里是關(guān)鍵，代表遞歸監(jiān)聽 demo 的變化
      deep: true
    }
},

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

4、對(duì)象具體屬性的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各自處理的數(shù)據(jù)關(guān)系場(chǎng)景不同

watch擅長(zhǎng)處理的場(chǎng)景：一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)computed擅長(zhǎng)處理的場(chǎng)景：一個(gè)數(shù)據(jù)受多個(gè)數(shù)據(jù)影響
6、method和computed觸發(fā)條件不同computed只提供了緩存的值，而沒有重新計(jì)算只有符合：1.存在依賴型數(shù)據(jù) 2.依賴型數(shù)據(jù)發(fā)生改變這兩個(gè)條件,computed才會(huì)重新計(jì)算。而methods下的數(shù)據(jù)，是每次都會(huì)進(jìn)行計(jì)算的

8. 特別注意

ES6中推出了箭頭函數(shù)，上述例子我均未使用箭頭函數(shù)，如果在handler函數(shù)中使用了箭頭函數(shù)，改變了this指向，就無法獲取到Vue實(shí)例，則為undifined。所以在這不要用箭頭函數(shù)，如果用， let that = this.
對(duì)于父子組件傳參，異步獲取數(shù)據(jù)有時(shí)會(huì)存在獲取不到值的情況。這時(shí)候watch就派上用場(chǎng)，適當(dāng)?shù)臅r(shí)候要配合immediate或者deep屬性配合使用。

監(jiān)聽表單對(duì)象的坑：

  <van-form @submit="addOrEdit">
    <div class="public_main bgw">
      <div class="flex bb1 mr15 ml15">
        <div class="w20 tal aic flex fwb f13">真實(shí)姓名</div>
        <van-field
          v-model="form.name"
          class="flex1 pt14 pb14"
          :rules="[{ required: true, message: '請(qǐng)輸入就診人姓名' }]"
          placeholder="請(qǐng)輸入就診人姓名"
        />
      </div>
      <div class="flex bb1 mr15 ml15">
        <div class="w20 tal aic flex fwb f13">身份證號(hào)</div>
        <van-field
          v-model="form.idCard"
          class="flex1 pt14 pb14"
          @input="calculateBirthdate"
          placeholder="請(qǐng)輸入身份證號(hào)碼"
          :rules="[
            { required: true, message: '請(qǐng)輸入身份證號(hào)碼' },
            {
              validator: util.validate.idCardAll,
              message: '請(qǐng)輸入正確的身份證號(hào)碼',
              trigger: 'onChange',
            },
          ]"
        />
      </div>
    </div>
  </van-form>

js

//當(dāng)表單的初始值只要對(duì)象form初始值
data(){
return:{
    form:{}
  }
}

  watch: {
    //監(jiān)聽身份證
    "form.idCard": {
      handler(newVal, oldVal) {
        // console.log(newVal);
        console.log(oldVal);
        //大陸身份證號(hào)碼校驗(yàn)
        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)$/;
        //香港身份證號(hào)碼校驗(yàn)
        //開頭一位或兩位大寫字母，然后接上6-10位數(shù)字，最后一位數(shù)字或字母校驗(yàn)
        var isMatchHongKong = /^[A-Z]{1,2}[0-9]{6,10}[0-9A-Z]$/;
        //澳門身份證號(hào)碼校驗(yàn)
        //開頭數(shù)字1或者5或者7，然后接上6位數(shù)字，再接上一位數(shù)字或者大寫字母校驗(yàn)
        var isMatchAoMen = /^[1|5|7][0-9]{6}[0-9A-Z]$/;
        //臺(tái)灣身份證號(hào)碼校驗(yàn)
        //開頭一位小寫或者大寫字母，接上9位數(shù)字
        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;
//新增的時(shí)候，如果這里第一次賦值表單idcard(其實(shí)不能說是賦值，應(yīng)該是定義賦值)，而且用了深度監(jiān)聽，deep: true,
//當(dāng)輸入name,此時(shí)name也是第一次賦值表單name了(其實(shí)不能說是賦值，應(yīng)該是定義賦值)，表單屬性的定義，會(huì)更新到整個(gè)表單，導(dǎo)致form.idCard也被監(jiān)聽了，就算form.idCard的值沒變，也會(huì)指向form.idCard監(jiān)聽的代碼，因?yàn)橐婚_始form并沒有定義idcarda和name,但是如果把deep: true去掉，就不會(huì)出現(xiàn)該問題，
//所以表單對(duì)象的屬性最好還是一開始就定義好，form:{name:"",idCard:"},就不會(huì)出現(xiàn)該問題，編輯的時(shí)候每個(gè)屬性都定義賦值了，所以就不會(huì)出現(xiàn)這種情況
          // this.$set(this.form, "birthDate", null);
        } else {
          this.isDaluIdCard = true;
        }
      },
      // deep: true,
    },
  },

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.引子 在了解vue中的監(jiān)聽器的詳細(xì)知識(shí)前，我們需要先從Vue的一個(gè)實(shí)例創(chuàng)建來說起。 我們以一個(gè)例子作為引子。下...
    SophieRabbit閱讀 2,545評(píng)論 0贊 1
  • 前言 記錄平時(shí)學(xué)到的知識(shí)，標(biāo)題寫的大氣一點(diǎn)，也算是給自己一點(diǎn)鼓勵(lì)，希望在技術(shù)這條路可以遠(yuǎn)走越遠(yuǎn)，路越走越寬~ 文中...
    徐國(guó)軍_plus閱讀 1,111評(píng)論 0贊 9
  • VUE介紹 Vue的特點(diǎn)構(gòu)建用戶界面，只關(guān)注View層簡(jiǎn)單易學(xué)，簡(jiǎn)潔、輕量、快速漸進(jìn)式框架 框架VS庫(kù)庫(kù)，是一封裝...
    多多醬_DuoDuo_閱讀 2,853評(píng)論 1贊 17
  • 在vue中，使用watch來響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。下面代碼是watch的一種簡(jiǎn)單的用法： n...
    十六_f081閱讀 843評(píng)論 0贊 0
  • 他大一。 她大四。 相遇。那是秋天季末的一個(gè)午后，那天起著風(fēng)，和著溫柔的陽光。因?yàn)槲錆h的秋天是極冷的，所以趁著這有...
    H_K閱讀 397評(píng)論 1贊 1

友情鏈接更多精彩內(nèi)容