欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中watch的實際開發(fā)學習筆記

 更新時間：2022年11月08日 11:32:19   作者：奶廠小程  
watch是Vue實例的一個屬性是用來響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實際開發(fā)筆記,需要的朋友可以參考下

前言

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

一、watch是什么

根據(jù)本人的理解，它就是一個監(jiān)聽器，就是說監(jiān)聽的某個數(shù)據(jù)發(fā)生了變化，那么它就會執(zhí)行相對應(yīng)的函數(shù)。它主要使用在哪些場景呢，比如：一個數(shù)據(jù)影響著多個數(shù)據(jù)的業(yè)務(wù)。

  watch:{  // 當這個workType發(fā)生改變時，就是1個數(shù)據(jù)的改變，就會影響到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不同的實際使用場景開發(fā)案例

1.場景1：加載完成后登錄監(jiān)聽

代碼如下：

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

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

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開發(fā) , 2 測試 
        foll:true
      },
 
    };
}

2.watch的監(jiān)聽

  watch:{  // 當這個workType發(fā)生改變時，就是1個數(shù)據(jù)的改變，就會影響到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個選框：開發(fā)；

                第2個選框： A,B,C

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

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

  由上所示，當?shù)?個選框，選擇“開發(fā)”選項時，則第2個選框出現(xiàn)的選項內(nèi)容為ABC;當?shù)?個選框，選擇“測試”選項時，則第2個選框出現(xiàn)的選項內(nèi)容為ABCD;這時就實現(xiàn)了當初的上一個不同選項出現(xiàn)下一個不同的選項內(nèi)容的效果了。

原理描述：它是主要是通過判斷queryParams的里面的workType的參數(shù)的變化，來進行監(jiān)聽的，如果當用戶點了開發(fā)這個選項，那么這個workType的newName就是1了，所以就觸發(fā)了watch里面的這個函數(shù)了，那么這里就可以進行業(yè)務(wù)方面的處理即可。

3.場景3：深度監(jiān)聽

說明：
 
handler: 固定方法觸發(fā)
deep: 開啟深度監(jiān)聽
immediate: 頁面初始化時handler立即執(zhí)行一次
 
  data(){
    return {
      user: {
        userNo: "",
        sex: ""
      }
    }
  },
 
  // 監(jiān)聽整對象
  watch: {
        // 監(jiān)聽整個對象，對象里的每個屬性值的變化都會執(zhí)行handler，執(zhí)行后獲取的 newVal 值和 oldVal 值是一樣的
    user: {
      handler(newVal, oldVal){
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
 
 watch: {
       // 監(jiān)聽對象的某個屬性，被監(jiān)聽的屬性值發(fā)生變化就會執(zhí)行函數(shù)，但獲取的 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：頁面的跳轉(zhuǎn)

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

這個主要是深度監(jiān)聽的使用，如何監(jiān)聽某個對象中的某個屬性的變化，就是上面這個案例，看業(yè)務(wù)需求來進行使用。

補充：watch簡寫形式

如果只是監(jiān)聽單個簡單的數(shù)據(jù)，使用watch的簡寫形式就可以滿足需求。

代碼如下：

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

總結(jié)

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

到此這篇關(guān)于vue中watch的實際開發(fā)筆記的文章就介紹到這了,更多相關(guān)vue中watch開發(fā)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論