快捷導(dǎo)航

Vue中watch監(jiān)聽(tīng)首次不生效的解決辦法

更新時(shí)間：2024年09月05日 09:08:37 作者：Licky13

在 Vue 中,watch 屬性用于觀察和響應(yīng) Vue 實(shí)例上數(shù)據(jù)的變動(dòng),然而,默認(rèn)情況下,watch 確實(shí)不會(huì)觸發(fā)組件創(chuàng)建時(shí)的變動(dòng),這里有幾種方式可以處理或繞過(guò)這個(gè)問(wèn)題,需要的朋友可以參考下

引言

在 Vue 中，watch 屬性用于觀察和響應(yīng) Vue 實(shí)例上數(shù)據(jù)的變動(dòng)。然而，默認(rèn)情況下，watch 確實(shí)不會(huì)觸發(fā)組件創(chuàng)建時(shí)（即數(shù)據(jù)初始化時(shí)）的變動(dòng)，因?yàn)樗饕O(shè)計(jì)用來(lái)監(jiān)聽(tīng)數(shù)據(jù)變化后的響應(yīng)。如果你希望在組件創(chuàng)建時(shí)（即數(shù)據(jù)初始化后）也能執(zhí)行某些操作，你需要采用一些額外的方法。

這里有幾種方式可以處理或繞過(guò)這個(gè)問(wèn)題：

1. 使用 immediate: true

在 Vue 2.x 中，你可以在 watch 的選項(xiàng)中設(shè)置 immediate: true，這樣 watch 會(huì)在初始化時(shí)立即以當(dāng)前的值觸發(fā)回調(diào)，而不僅僅是后續(xù)變化時(shí)。

watch: {  
  someData(newVal, oldVal) {  
    // 當(dāng) someData 發(fā)生變化時(shí)執(zhí)行的邏輯  
    // 設(shè)置 immediate: true 后，初始化時(shí)也會(huì)執(zhí)行  
  },  
  immediate: true, // 注意：這種寫(xiě)法是錯(cuò)誤的  
  // 正確的寫(xiě)法是將其作為 watch 選項(xiàng)的一部分  
  someData: {  
    handler(newVal, oldVal) {  
      // 當(dāng) someData 變化時(shí)執(zhí)行的邏輯  
    },  
    immediate: true, // 正確設(shè)置  
    deep: true // 如果需要深度監(jiān)聽(tīng)對(duì)象內(nèi)部的變化  
  }  
}

2. 在 created 或 mounted 鉤子中執(zhí)行

如果你只需要在組件創(chuàng)建或掛載時(shí)執(zhí)行某些邏輯（基于初始數(shù)據(jù)），你可以直接在 created 或 mounted 生命周期鉤子中執(zhí)行這些邏輯，而不是使用 watch。

created() {  
  // 組件創(chuàng)建完成后立即執(zhí)行的邏輯  
  this.doSomethingWithInitialData(this.someData);  
},  
methods: {  
  doSomethingWithInitialData(data) {  
    // 使用初始數(shù)據(jù)的邏輯  
  }  
}

3. 使用 computed 屬性

有時(shí)，使用 computed 屬性而不是 watch 可以更優(yōu)雅地解決問(wèn)題。computed 屬性基于它們的依賴(lài)進(jìn)行緩存，并且只有在相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新求值。你可以通過(guò) computed 來(lái)派生一些數(shù)據(jù)，并在需要時(shí)訪問(wèn)這些派生數(shù)據(jù)。

computed: {  
  derivedData() {  
    // 基于 someData 派生新數(shù)據(jù)  
    return this.someData.processedValue;  
  }  
}

總結(jié)

如果需要在數(shù)據(jù)初始化時(shí)也執(zhí)行邏輯，考慮使用 watch 的 immediate: true 選項(xiàng)。
如果邏輯只與組件的初始化狀態(tài)有關(guān)，考慮使用 created 或 mounted 生命周期鉤子。
使用 computed 屬性來(lái)處理基于響應(yīng)式數(shù)據(jù)的派生數(shù)據(jù)。

到此這篇關(guān)于Vue中watch監(jiān)聽(tīng)首次不生效的解決辦法的文章就介紹到這了,更多相關(guān)Vue watch監(jiān)聽(tīng)首次不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: