Vue中watch監(jiā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)聽數(shù)據(jù)變化后的響應(yīng)。如果你希望在組件創(chuàng)建時(shí)（即數(shù)據(jù)初始化后）也能執(zhí)行某些操作，你需要采用一些額外的方法。
這里有幾種方式可以處理或繞過這個(gè)問題：
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, // 注意：這種寫法是錯(cuò)誤的
// 正確的寫法是將其作為 watch 選項(xiàng)的一部分
someData: {
handler(newVal, oldVal) {
// 當(dāng) someData 變化時(shí)執(zhí)行的邏輯
},
immediate: true, // 正確設(shè)置
deep: true // 如果需要深度監(jiān)聽對(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)雅地解決問題。computed 屬性基于它們的依賴進(jìn)行緩存，并且只有在相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。你可以通過 computed 來(lái)派生一些數(shù)據(jù)，并在需要時(shí)訪問這些派生數(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)聽首次不生效的解決辦法的文章就介紹到這了,更多相關(guān)Vue watch監(jiān)聽首次不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 多入口文件搭建 vue多頁(yè)面搭建的實(shí)例講解
下面小編就為大家分享一篇vue 多入口文件搭建 vue多頁(yè)面搭建的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03
vue?內(nèi)置組件?component?的用法示例詳解
這篇文章主要介紹了vue內(nèi)置組件component的用法,本文給大家介紹了component內(nèi)置組件切換方法，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
Vue3的customRef允許自定義響應(yīng)式邏輯,通過get/set控制依賴追蹤與更新觸發(fā),適用于防抖、驗(yàn)證、異步等場(chǎng)景,最佳實(shí)踐包括封裝函數(shù)、正確調(diào)用track/trigger、清理資源及優(yōu)化性能2025-09-09
這篇文章主要為大家詳細(xì)介紹了vue+mock.js實(shí)現(xiàn)前后端分離，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決
這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue中實(shí)現(xiàn)拖拽排序功能的詳細(xì)教程
在業(yè)務(wù)中列表拖拽排序是比較常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)拖拽排序功能的詳細(xì)教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
我們看到的v-開頭的行內(nèi)屬性，都是指令，不同的指令可以完成或?qū)崿F(xiàn)不同的功能，對(duì)普通 DOM元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令。除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊(cè)自定義指令2022-09-09
這篇文章主要為大家詳細(xì)介紹了如何在Vue項(xiàng)目中使用flv.js播放視頻,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
vue中swiper?vue-awesome-swiper的使用方法及各種坑解決
這篇文章主要介紹了vue中swiper?vue-awesome-swiper的使用方法及各種坑解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue項(xiàng)目前端知識(shí)點(diǎn)整理【收藏】
本文是小編給大家收藏整理的關(guān)于vue項(xiàng)目前端知識(shí)點(diǎn)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05