快捷導(dǎo)航

vue3的watch用法以及和vue2中watch的區(qū)別

更新時(shí)間：2023年04月20日 11:08:21 作者：潮汐未見潮落

這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

watch介紹

watch 屬性監(jiān)聽是一個(gè)對象，鍵是需要觀察的屬性，值是對應(yīng)回調(diào)函數(shù)，主要用來監(jiān)聽某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作,監(jiān)聽屬性的變化，需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)使用。

Vue2 用法

在 Vue2 的 options API 中， watch 與 methods 一樣作為一個(gè)模塊，在其中定義相應(yīng)的監(jiān)聽事件

監(jiān)聽基礎(chǔ)變量

需要監(jiān)聽的普通變量，要在 watch 模塊中，定義以該變量名命名的函數(shù)，就像下面的 count

<template>
  <div>
    <h2>{{ count }}</h2>
    <button @click="count++">+</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
  // count 接收一個(gè)回調(diào)函數(shù)，當(dāng)數(shù)據(jù)變化時(shí)會(huì)執(zhí)行該函數(shù)，接收兩個(gè)參數(shù)：
  // 第一個(gè)參數(shù)是：最新的值 第二個(gè)參數(shù)是：上一次的值
    count: function(newValue, oldValue) {
      console.log(newValue, oldValue) // 1, 0
    }
  }
};
</script>

監(jiān)聽對象

需要監(jiān)聽的對象，在 watch 模塊中定義該變量，添加 deep 屬性實(shí)現(xiàn)深度監(jiān)聽

<template>
  <div>
    <h2>{{ data.count }}</h2>
    <button @click="data.count++">+</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {
        count: 0
      }
    }
  },
  watch: {
    data: {
      change(newValue,oldValue) {
        console.log(newValue, oldValue)  // 1, 0
      },
      deep: true, // 添加這個(gè)屬性，當(dāng)data里面深層嵌套的數(shù)據(jù)發(fā)生變化時(shí)也可以執(zhí)行回調(diào)
      immediate: true // 添加這個(gè)屬性，當(dāng)界面初始化時(shí)會(huì)先執(zhí)行一次
    }
  }
};
</script>

Vue3的用法

Vue3 的 Composition API 中， watch 作為函數(shù)調(diào)用，在函數(shù)中定義相應(yīng)的事件邏輯

監(jiān)聽基礎(chǔ)類型

<template>
  <div class="card"> 
    <span>{{ count }}</span>
    <button @click="Add">+</button>
  </div>
</template>
 
<script setup>
import { ref, watch } from "vue";
const count = ref(0);
 
watch(count, (newValue, oldValue) => {
  console.log('newValue->', newValue);
  console.log('oldValue->', oldValue);
})
const Add = () => {
  count.value++;
}
</script>

監(jiān)聽復(fù)雜類型

<template>
  <div>
    <button @click="change">change</button>
  </div>
</template>
 
<script setup>
import { ref, watch, reactive } from "vue";
const user = reactive({
  name: "jake",
  phone: "10010",
  score: {
    math: 90,
    english: 80,
  },
});
const change = () => {
  user.name = "mike";
};
</script>

復(fù)雜類型的監(jiān)聽有很多種情況，具體的內(nèi)容如下

監(jiān)聽整個(gè)對象(使用較多）

// 監(jiān)聽整個(gè)對象;
watch(user, (newValue, oldValue) => {
  console.log("newValue->", newValue);
  console.log("oldValue->", oldValue);
});

其第一個(gè)參數(shù)是直接傳入要監(jiān)聽的對象 user。當(dāng)監(jiān)聽整個(gè)對象時(shí)，只要這個(gè)對象有任何修改，那么就會(huì)觸發(fā) watch 方法。無論是其子屬性變更（如 user.name），還是孫屬性變更（如 user.score.math）...，都是會(huì)觸發(fā) watch 方法。默認(rèn)開啟深度監(jiān)聽，且通過配置deep：false，無法關(guān)閉

注意：使用 reactive 定義的數(shù)據(jù)(對象)，無法獲取正確的oldValue（上一次的值）,打印結(jié)果都是一樣

監(jiān)聽對象中的某個(gè)屬性

// 監(jiān)聽對象單個(gè)屬性
watch(
  () => user.name,
  (newValue, oldValue) => {
    console.log("newValue->", newValue);
    console.log("oldValue->", oldValue);
  }
);

如上代碼，監(jiān)聽 user 對象的 name 屬性，那么只有當(dāng) user 對象的 name 屬性發(fā)生變更時(shí)，才會(huì)觸發(fā) watch 方法，其他屬性變更不會(huì)觸發(fā) watch 方法。注意，此時(shí)的第一個(gè)參數(shù)是一個(gè)箭頭函數(shù)。

注意：這種方式可以獲取正確的oldValue（上一次的值），注意和上面的區(qū)分

監(jiān)聽對象子屬性

// 監(jiān)聽對象子屬性
watch(
  () => ({ ...user }),
  (newValue, oldValue) => {
    console.log("newValue->", newValue);
    console.log("oldValue->", oldValue);
  }
);

這種情況，只有當(dāng) user 的子屬性(name、phone)發(fā)生變更時(shí)才會(huì)觸發(fā) watch 方法。孫屬性，曾孫屬性... 發(fā)生變更都不會(huì)觸發(fā) watch 方法。也就是說，當(dāng)你修改 user.score.math 或者 user.score.english 時(shí)是不會(huì)觸發(fā) watch 方法的。

注意：這種方式可以獲取正確的oldValue（上一次的值），但是和上面有略微差別

監(jiān)聽對象所有屬性

// 監(jiān)聽整個(gè)對象，使用 deep 屬性
watch(
  () => user,
  (newValue, oldValue) => {
    console.log("newValue->", newValue);
    console.log("oldValue->", oldValue);
  },
  { deep: true }
);

這個(gè)相當(dāng)于監(jiān)聽整個(gè)對象（效果與上面的第一種相同）。但是實(shí)現(xiàn)方式與上面第一種是不一樣的，這里我們可以看到，第一個(gè)參數(shù)是箭頭函數(shù)，并且還多了第三個(gè)參數(shù) { deep: true }。當(dāng)加上了第三個(gè)參數(shù) { deep: true }，那么就不僅僅是監(jiān)聽對象的子屬性了，它還會(huì)監(jiān)聽孫屬性，曾孫屬性 ...

注意：這里和第一種情況一樣，無法獲取正確的oldValue（上一次的值）,打印結(jié)果都是一樣

通常要實(shí)現(xiàn)監(jiān)聽對象的所有屬性，都會(huì)采用第一種方法，原因是第一種編碼簡單，第一個(gè)參數(shù)直接傳入對象即可，雖然獲取不到 oldValue，但是問題不大。

組合監(jiān)聽

組合監(jiān)聽就是，如果要同時(shí)監(jiān)聽 user 對象的 name 屬性，和基礎(chǔ)類型 count，只要他們其中任何一個(gè)發(fā)生變更，那么就觸發(fā) watch 方法。

特定情況下要用到

const count = ref(0)；
const user = reactive({
  name: "jake",
  phone: "10010",
  score: {
    math: 90,
    english: 80,
  },
});

// 組合監(jiān)聽
watch([() => user.name, count], ([newName, newCount], [oldName, oldCount]) => {
  console.log("newName->", newName);
  console.log("oldName->", oldName);
  console.log("newCount->", newCount);
  console.log("oldCount->", oldCount);
});

注意，此時(shí)的第一個(gè)參數(shù)是一個(gè)數(shù)組，且第二參數(shù)箭頭函數(shù)的參數(shù)也是數(shù)組的形式。

Vue 2 Vue3 小區(qū)別

在 Vue2 的 options API 中， watch 與 methods 一樣作為一個(gè)模塊，如果要監(jiān)聽多個(gè)變量，要在其中一個(gè)一個(gè)定義相應(yīng)的監(jiān)聽事件

VUE3 的 Composition API可以多次使用 watch 方法，通過多個(gè)watch 方法來監(jiān)聽多個(gè)對象。

Vue2

watch: {
    count () {
      // 邏輯代碼
    },
   user: {
    name() {
       // 邏輯代碼
        }
    }
}

Vue3

watch(count, () => {})
watch(() => user.name, () => {})

computed和watch的區(qū)別

通俗來講，既能用 computed 實(shí)現(xiàn)又可以用 watch 監(jiān)聽來實(shí)現(xiàn)的功能，推薦用 computed，重點(diǎn)在于 computed 的緩存功能，computed 計(jì)算屬性是用來聲明式的描述一個(gè)值依賴了其它的值，當(dāng)所依賴的值或者變量改變時(shí)，計(jì)算屬性也會(huì)跟著改變； watch 監(jiān)聽的是已經(jīng)在 data 中定義的變量，當(dāng)該變量變化時(shí)，會(huì)觸發(fā) watch 中的方法。

watch

watch 屬性監(jiān)聽是一個(gè)對象，鍵是需要觀察的屬性，值是對應(yīng)回調(diào)函數(shù)，主要用來監(jiān)聽某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作,監(jiān)聽屬性的變化，需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)使用

computed

computed 計(jì)算屬性屬性的結(jié)果會(huì)被緩存，當(dāng) computed 中的函數(shù)所依賴的屬性沒有發(fā)生改變的時(shí)候，那么調(diào)用當(dāng)前函數(shù)的時(shí)候結(jié)果會(huì)從緩存中讀取。除非依賴的響應(yīng)式屬性變化時(shí)才會(huì)重新計(jì)算，主要當(dāng)做屬性來使用 computed 中的函數(shù)必須用 return 返回最終的結(jié)果， computed 更高效，優(yōu)先使用。data 不改變，computed 不更新。

適用場景