前言

說(shuō)到 vue 中的 watch 方法，大家可能首先想到，它是用來(lái)監(jiān)聽(tīng)數(shù)據(jù)的變化，一旦數(shù)據(jù)發(fā)生變化可以執(zhí)行一些其他的操作。但是 watch 的操作可不止如此，本章就帶大家一起深剖細(xì)析 vue 中的 watch 方法。

watch

因?yàn)?vue 是雙向數(shù)據(jù)綁定，所以當(dāng)頁(yè)面數(shù)據(jù)發(fā)生變化時(shí)，我們通過(guò) watch 方法就可以拿到數(shù)據(jù)變化前和變化后的值，從而做一系列操作，下面我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)解釋。

先看下面這段代碼

<template>
  <div>
    <input type="text" v-model="nameModel" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      nameModel: "",
    };
  },
  watch: {
    nameModel() {
      console.log("觸發(fā)打印");
    },
  },
};
</script>

實(shí)現(xiàn)效果

immediate和handler

問(wèn)：immediate 和 handler 是干嘛用的？

在回答這個(gè)問(wèn)題之前，我們先回到上面的例子中，如果我想讓值第一次綁定的時(shí)候就監(jiān)聽(tīng)函數(shù)該怎么辦？這就牽扯到 watch 的一個(gè)特點(diǎn)，就是當(dāng)值第一次綁定的時(shí)候，不會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù)，只有值發(fā)生改變才會(huì)執(zhí)行。那如果我們就是需要在最初綁定值的時(shí)候也執(zhí)行函數(shù)，舉個(gè)最常見(jiàn)的例子，當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí)，子組件 props 首次接收父組件傳來(lái)的默認(rèn)值時(shí)，也需要執(zhí)行函數(shù)，這個(gè)時(shí)候就需要用到 immediate 屬性。

接著看下面這段代碼

父組件

<template>
  <div>
    <Child :message="informtion"></Child>
  </div>
</template>
<script>
import Child from "./subassembly/seed.vue";
export default {
  data() {
    return {
      informtion: "默認(rèn)傳遞給子組件的數(shù)據(jù)",
    };
  },
  components: {
    Child,
  },
};
</script>

子組件

<template>
  <h2>接收父組件值：{{ value }}</h2>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  props: {
    message: {
      type: String,
      default: "",
    },
  },
  watch: {
    message: {
      handler(newName, oldName) {
        this.value = newName;
      },
      immediate: true, //首次綁定的時(shí)候，是否執(zhí)行 handler
    },
  },
};
</script>

當(dāng) immediate 為 false 時(shí)

當(dāng) immediate 為 true 時(shí)

通過(guò)上面的例子我們不難推出：immediate 表示在 watch 中首次綁定的時(shí)候，是否執(zhí)行 handler，值為 true 時(shí)表示在 watch 中聲明的時(shí)候，就立即執(zhí)行 handler 方法，反之，則和一般使用 watch 一樣，在數(shù)據(jù)發(fā)生變化的時(shí)候才執(zhí)行 handler。

注意：handler 有 2 個(gè)參數(shù)。第一個(gè)是 newValue，第二個(gè)是 oldValue，分別表示新的值和舊的值。

deep

deep 其實(shí)就是深度監(jiān)聽(tīng)，那可能又有同學(xué)要問(wèn)了，深度監(jiān)聽(tīng)又是啥？試想一下，當(dāng)你監(jiān)聽(tīng)的目標(biāo)是一個(gè)對(duì)象時(shí)，當(dāng)對(duì)象中的 a 值發(fā)生變化，在不使用 deep 的前提下，是不會(huì)觸發(fā) handler 函數(shù)的，因?yàn)檫@個(gè)對(duì)象并沒(méi)有改變，再通俗的講就是對(duì)象中的 a 并沒(méi)有變成 b 或者是消失了，你只是修改了 a 的值，但是 a 的值是 a 的，并不是對(duì)象的，并不能代表對(duì)象的改變。

再看下面這段代碼

<template>
  <div>
    <input type="text" v-model="forms.nameModel" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      forms: {
        nameModel: "",
      },
    };
  },
  watch: {
    forms: {
      handler(newName, oldName) {
        console.log("觸發(fā)打印");
      },
    },
  },
};
</script>

實(shí)現(xiàn)效果

可以看到控制臺(tái)并沒(méi)有打印任何結(jié)果，再回到上面的問(wèn)題，deep 屬性就是用來(lái)解決這個(gè)問(wèn)題的。當(dāng)你需要監(jiān)聽(tīng)一個(gè)對(duì)象的改變時(shí)，普通的 watch 方法無(wú)法監(jiān)聽(tīng)到對(duì)象內(nèi)部屬性的改變，只有 data 中的數(shù)據(jù)才能夠監(jiān)聽(tīng)到變化，此時(shí)就需要 deep 屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽(tīng)。

正確的寫(xiě)法

通過(guò)設(shè)置 deep: true 則可以監(jiān)聽(tīng)到對(duì)象中屬性值的變化。

<template>
  <div>
    <input type="text" v-model="forms.nameModel" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      forms: {
        nameModel: "",
      },
    };
  },
  watch: {
    forms: {
      handler(newName, oldName) {
        console.log("觸發(fā)打印");
      },
      deep: true,
    },
  },
};
</script>

實(shí)現(xiàn)效果

有同學(xué)可能要問(wèn)了，對(duì)象中有 n 個(gè)屬性，但是我只想監(jiān)聽(tīng)某一個(gè)屬性值的變化該怎么寫(xiě)呢？其實(shí)有一個(gè)非常簡(jiǎn)單的方法：使用字符串的形式監(jiān)聽(tīng)對(duì)象屬性值變化。

實(shí)例

<template>
  <div>
    <input type="text" v-model="forms.nameModel" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      forms: {
        nameModel: "",
      },
    };
  },
  watch: {
    "forms.nameModel": {
      handler(newName, oldName) {
        console.log("觸發(fā)打印");
      },
    },
  },
};
</script>

實(shí)現(xiàn)效果

注意： 數(shù)組（一維、多維）的變化不需要通過(guò)深度監(jiān)聽(tīng)，對(duì)象數(shù)組中對(duì)象的屬性變化則需要深度監(jiān)聽(tīng)。

拓展

computed 和 watch 區(qū)別

兩者最明顯的區(qū)別在于 watch 是觀察某一個(gè)屬性的變化，從而重新計(jì)算屬性的值；而 computed 是通過(guò)所依賴(lài)的屬性的變化計(jì)算屬性值，在絕大部分情況下，computed 和 watch 沒(méi)有明顯區(qū)別，但如果是在數(shù)據(jù)變化的同時(shí)進(jìn)行異步操作，那么 watch 無(wú)疑是最好的選擇。

到此這篇關(guān)于Vue中watch使用方法詳解的文章就介紹到這了,更多相關(guān)Vue watch內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論