快捷導(dǎo)航

vue中watch監(jiān)聽器的觸發(fā)時機(jī)(watch的坑及解決)

更新時間：2022年04月11日 08:51:50 作者：敲完這個我就再也不熬夜了

這篇文章主要介紹了vue中watch監(jiān)聽器的觸發(fā)時機(jī)(watch的坑及解決)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

watch監(jiān)聽器的觸發(fā)時機(jī)

起因

我需要在頁面created時獲得商家的類型id值，然后監(jiān)聽id值，動態(tài)的改變請求接口的地址。請求接口的函數(shù)在mounted中執(zhí)行。業(yè)務(wù)邏輯寫完后發(fā)現(xiàn)，頁面在第一次加載時，接口沒有數(shù)據(jù)，原因接口地址為空，即接口地址沒有改變。

代碼

 created() {
    this.typeId = this.$route.params.id;
    console.log("this.typeId的值發(fā)生改變，觸發(fā)watch");
  },
  mounted() {
    console.log(this.typeUrl, "mounted中的typeUrl的值");
    //訪問接口的函數(shù)
    this.getData();
  },

watch

  watch: {
  // 監(jiān)聽訂單類型 給出對應(yīng)面包屑
  typeId: function (val) {
    if (val == 1) {
      console.log("watch觸發(fā)了");
      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的觸發(fā)會在created和mounted結(jié)束后。

先占個坑，具體原理如何只有等我項(xiàng)目完成了再來康康。

vue watch的理解小記

剛開始學(xué)時，感覺自己懂了?？墒堑接脮r才發(fā)現(xiàn)自己是渣渣中的渣渣。。。

想通過路由id的變化來改變組件的加載數(shù)據(jù)時，遇到了一個問題，就是，組件不會重新渲染。一臉懵逼了，，，

找到了watch的監(jiān)控方法時，又用不好?？劭蹠昧艘恍?，趕緊記下來。

首先確認(rèn) watch是一個對象，一定要當(dāng)成對象來用。

對象就有鍵，有值。

鍵：就是你要監(jiān)控的那個家伙，比如說$route，這個就是要監(jiān)控路由的變化?；蛘呤莇ata中的某個變量。
值可以是函數(shù)：就是當(dāng)你監(jiān)控的家伙變化時，需要執(zhí)行的函數(shù)，這個函數(shù)有兩個形參，第一個是當(dāng)前值，第二個是變化后的值。
值也可以是函數(shù)名：不過這個函數(shù)名要用單引號來包裹。

第三種情況厲害了。

值是包括選項(xiàng)的對象：選項(xiàng)包括有三個。

第一個handler：其值是一個回調(diào)函數(shù)。即監(jiān)聽到變化時應(yīng)該執(zhí)行的函數(shù)。
第二個是deep：其值是true或false；確認(rèn)是否深入監(jiān)聽。（一般監(jiān)聽時是不能監(jiān)聽到對象屬性值的變化的，數(shù)組的值變化可以聽到。）
第三個是immediate：其值是true或false；確認(rèn)是否以當(dāng)前的初始值執(zhí)行handler的函數(shù)。

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

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: