快捷導(dǎo)航

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

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

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

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

起因

我需要在頁面created時(shí)獲得商家的類型id值，然后監(jiān)聽id值，動(dòng)態(tài)的改變請(qǐng)求接口的地址。請(qǐng)求接口的函數(shù)在mounted中執(zhí)行。業(yè)務(wù)邏輯寫完后發(fā)現(xiàn)，頁面在第一次加載時(shí)，接口沒有數(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)聽訂單類型 給出對(duì)應(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";
    }
  },

控制臺(tái)

在這里插入圖片描述

說明

watch的觸發(fā)會(huì)在created和mounted結(jié)束后。

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

vue watch的理解小記

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

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

找到了watch的監(jiān)控方法時(shí)，又用不好?？劭蹠?huì)用了一些，趕緊記下來。

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

對(duì)象就有鍵，有值。

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

第三種情況厲害了。

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

第一個(gè)handler：其值是一個(gè)回調(diào)函數(shù)。即監(jiān)聽到變化時(shí)應(yīng)該執(zhí)行的函數(shù)。
第二個(gè)是deep：其值是true或false；確認(rèn)是否深入監(jiān)聽。（一般監(jiān)聽時(shí)是不能監(jiān)聽到對(duì)象屬性值的變化的，數(shù)組的值變化可以聽到。）
第三個(gè)是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)的對(duì)象
? ? c: {
? ? ? handler: function (val, oldVal) { /* ... */ },
? ? ? deep: true，
? ? ? immediate: true
? ? }
? }
})

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

您可能感興趣的文章: