vue中watch的實際開發學習筆記

2022-11-09 14:01:31

前言

本文主要是積累一下在使用前端的watch開發過程中遇到的問題點和經驗。

一、watch是什麼

根據本人的理解，它就是一個監聽器，就是說監聽的某個資料發生了變化，那麼它就會執行相對應的函數。它主要使用在哪些場景呢，比如：一個資料影響著多個資料的業務。

  watch:{  // 當這個workType發生改變時，就是1個資料的改變，就會影響到type5和foll的改變
    'queryParams.workType':function (newName,oldName){
      if(newName==1){
        this.type5 = this.type3,
        this.foll = true
      }else if(newName==2){
        this.type5 = this.type4,
        this.foll = false
      }
    }
  },

二、watch不同的實際使用場景開發案例

1.場景1：載入完成後登入監聽

程式碼如下：

  watch: {
    isLoading (newVal, oldVal) { //1. 原來的值，和現在的值，是否有變化，如果有變化，觸發這個函數
      console.log('2 isLoading newVal is ', newVal, ' , oldVal is ', oldVal)
 
      //2. 當載入完成時, 還需要判斷使用者是否已登入
      const username = getLoginedUsername(this.$store)
      if (username != undefined && username != null) {
        // 已登入時, 跳轉首頁
        toHomePage(this)
      }
    }
  },
 
  computed: {
    isLoading () {
      return isLoading(this.$store)
    }
  },
 
import { isLoading, getLoginedUsername } from 'utils/utils'

2.場景2：前面不同的選擇框，影響下面的不同的選擇框的選項內容

1.data的程式碼如下：

 data() {
    return {
      verifyData: this.propData,
      editBoxShow: false,
 
      type3: [{
        worksRegion: '0',
        label: '牛奶'
      },{
        worksRegion:"1",
        label: "麵包"
      },
        {
          worksRegion:"3",
          label: "水果"
        }
      ],
      type4: [{
        worksRegion: '0',
        label: '炸雞'
      },{
        worksRegion:"1",
        label: "漢堡"
      },{
          worksRegion:"2",
          label: "可樂"
        },
        {
          worksRegion:"3",
          label: "北京烤鴨"
        }
      ],
      type5:[],
     
      queryParams:{
        id:"",
        workType:'',//1開發 , 2 測試 
        foll:true
      },
 
    };
}

2.watch的監聽

  watch:{  // 當這個workType發生改變時，就是1個資料的改變，就會影響到type5和foll的改變
    'queryParams.workType':function (newName,oldName){
      if(newName==1){
        this.type5 = this.type3,
        this.foll = true
      }else if(newName==2){
        this.type5 = this.type4,
        this.foll = false
      }
    }
  },

3.場景效果描述

比如：第1個選框：開發；

第2個選框： A,B,C

比如：第1個選框：測試；

第2個選框： A,B,C,D

由上所示，當第1個選框，選擇“開發”選項時，則第2個選框出現的選項內容為ABC;當第1個選框，選擇“測試”選項時，則第2個選框出現的選項內容為ABCD;這時就實現了當初的上一個不同選項出現下一個不同的選項內容的效果了。

原理描述：它是主要是通過判斷queryParams的裡面的workType的引數的變化，來進行監聽的，如果當用戶點了開發這個選項，那麼這個workType的newName就是1了，所以就觸發了watch裡面的這個函數了，那麼這裡就可以進行業務方面的處理即可。

3.場景3：深度監聽

說明：
 
handler: 固定方法觸發
deep: 開啟深度監聽
immediate: 頁面初始化時handler立即執行一次
 
  data(){
    return {
      user: {
        userNo: "",
        sex: ""
      }
    }
  },
 
  // 監聽整物件
  watch: {
        // 監聽整個物件，物件裡的每個屬性值的變化都會執行handler，執行後獲取的 newVal 值和 oldVal 值是一樣的
    user: {
      handler(newVal, oldVal){
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
 
 watch: {
       // 監聽物件的某個屬性，被監聽的屬性值發生變化就會執行函數，但獲取的 newVal 值和 oldVal 值不一樣
    'user.userNo': {
      handler(newVal, oldVal){
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }

4.場景4：賦值使用

  watch: {
    traysNos (newVal, oldVal) {
      if ((newVal && !oldVal) || (newVal && oldVal && newVal !== oldVal)) {
        this.filterDeliverysOutLists = []
        this.deliverysOutsList = this.fullsDeliverysOutsLists
      }
    }
  },

5.場景5：改變標記的true和false

   data () {
    return {
      loading: false,
      submitsCheck: true,
    }
  },
 
 watch: {
    'order.traysNos' (val) {
      if (val == null || val == '') {
        this.submitsCheck = true
      } else if (val) {
        this.submitsCheck = false
      }
    }
  },

6.場景6：頁面的跳轉

  watch: {
    reservesNo (newVal, oldVal) {
      if ((newVal && !oldVal) || (newVal && oldVal && newVal !== oldVal)) {
        this.reservesNo = newVal // 獲取到新值
        this.$router.replace({  // 跳轉，注意，這種跳轉，是不可以回退的
          query: {
            reservesNo: this.reservesNo  // 傳新值
          }
        })
        this.findOrderNo()  // 執行其他的函數
      }
    }
  },

這個主要是深度監聽的使用，如何監聽某個物件中的某個屬性的變化，就是上面這個案例，看業務需求來進行使用。

補充：watch簡寫形式

如果只是監聽單個簡單的資料，使用watch的簡寫形式就可以滿足需求。

程式碼如下：

<script>
export default {
  name: "Home",
  data() {
    return {
      text: ""
    };
  },
  watch: {
    text(newVal, oldVal) {
      
    }
  },
};
</script>