vue中watch監聽器的觸發時機(watch的坑及解決)

2022-04-11 10:01:17

watch監聽器的觸發時機

起因

我需要在頁面created時獲得商家的型別id值，然後監聽id值，動態的改變請求介面的地址。請求介面的函數在mounted中執行。業務邏輯寫完後發現，頁面在第一次載入時，介面沒有資料，原因介面地址為空，即介面地址沒有改變。

程式碼

 created() {
    this.typeId = this.$route.params.id;
    console.log("this.typeId的值發生改變，觸發watch");
  },
  mounted() {
    console.log(this.typeUrl, "mounted中的typeUrl的值");
    //存取介面的函數
    this.getData();
  },

watch

  watch: {
  // 監聽訂單型別 給出對應麵包屑
  typeId: function (val) {
    if (val == 1) {
      console.log("watch觸發了");
      this.selfBreadcrumb[1].name = "核銷訂單";
      this.typeUrl = "settlements";
      console.log(this.typeUrl, "這裡是watch");
    } else if (val == 2) {
      this.selfBreadcrumb[1].name = "物流訂單";
      this.typeUrl = "logistics-orders";
    } else if (val == 4) {
      this.selfBreadcrumb[1].name = "外賣訂單";
      this.typeUrl = "takeout-orders";
    }
  },

控制檯

說明

watch的觸發會在created和mounted結束後。

先佔個坑，具體原理如何只有等我專案完成了再來康康。

vue watch的理解小記

剛開始學時，感覺自己懂了。可是到用時才發現自己是渣渣中的渣渣。。。

想通過路由id的變化來改變元件的載入資料時，遇到了一個問題，就是，元件不會重新渲染。一臉懵逼了，，，

找到了watch的監控方法時，又用不好。扣扣會用了一些，趕緊記下來。

首先確認 watch是一個物件，一定要當成物件來用。

物件就有鍵，有值。

鍵：就是你要監控的那個傢伙，比如說$route，這個就是要監控路由的變化。或者是data中的某個變數。
值可以是函數：就是當你監控的傢伙變化時，需要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化後的值。
值也可以是函數名：不過這個函數名要用單引號來包裹。

第三種情況厲害了。

值是包括選項的物件：選項包括有三個。

第一個handler：其值是一個回撥函數。即監聽到變化時應該執行的函數。
第二個是deep：其值是true或false；確認是否深入監聽。（一般監聽時是不能監聽到物件屬性值的變化的，陣列的值變化可以聽到。）
第三個是immediate：其值是true或false；確認是否以當前的初始值執行handler的函數。

var vm = new Vue({
  data: {
    a: 1,
    b: 2
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 選項的物件
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true，
      immediate: true
    }
  }
})

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue中watch監聽器的觸發時機(watch的坑及解決)

目錄

watch監聽器的觸發時機

起因

程式碼

watch

控制檯

說明

vue watch的理解小記

熱門文章