vue watch immediate方法用法詳解
更新時(shí)間：2023年06月14日 11:08:37 作者：盤思動
這篇文章主要介紹了vue watch immediate方法用法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
- 通過
immediate選項(xiàng),我們可以第一次監(jiān)聽時(shí)就執(zhí)行回調(diào)函數(shù),以便進(jìn)行一些初始化操作. - 注意: 如果我們監(jiān)聽的事一個對象或數(shù)組類型數(shù)據(jù),那么
immediate選項(xiàng)只會在實(shí)例初始化時(shí)執(zhí)行一次回調(diào)操作，而不是在對象或數(shù)組內(nèi)部數(shù)據(jù)變化時(shí)重新執(zhí)行回調(diào)函數(shù)。 - 如果需要在內(nèi)部數(shù)據(jù)變化時(shí)也立即執(zhí)行回調(diào)函數(shù),可以使用
deep選項(xiàng)來深度監(jiān)聽數(shù)據(jù)變化.
watch immediate 屬性用法簡單demo
<template>
<div>
<p>當(dāng)前計(jì)數(shù): {{ count }}</p>
<p>計(jì)數(shù)變化次數(shù): {{ times }}</p>
<button @click="increment">增加計(jì)數(shù)</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
times: 0
};
},
watch: {
count: { // 監(jiān)聽 count 屬性變化并立即執(zhí)行回調(diào)函數(shù)
handler(newValue, oldValue) {
console.log(`count 值從 ${oldValue} 變?yōu)?${newValue}`);
this.times++;
},
immediate: true // 頁面初始化,立即執(zhí)行一次回調(diào)函數(shù)!!!
}
},
methods: {
increment() {
this.count++;
}
}
};
</script>到此這篇關(guān)于vue watch immediate方法用法詳解的文章就介紹到這了,更多相關(guān)vue watch immediate方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue2.0利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案
本篇文章主要介紹了Vue2 利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了詳解vue 項(xiàng)目白屏解決方案，詳細(xì)的介紹了白屏的解決方案，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue高級特性的相關(guān)知識，文中介紹非常細(xì)致，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
Vue如何處理Axios多次請求數(shù)據(jù)顯示問題
這篇文章主要介紹了Vue如何處理Axios多次請求數(shù)據(jù)顯示問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue3中如何使用dayjs問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑
這篇文章主要介紹了vue-cli與webpack處理靜態(tài)資源的方法,需要的朋友可以參考下2018-05-05
實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式
今天小編就為大家分享一篇實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決Vue3+ts項(xiàng)目打包時(shí)報(bào)錯的問題
這篇文章主要介紹了解決Vue3+ts項(xiàng)目打包時(shí)報(bào)錯的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
本文主要介紹了Next.js路由布局機(jī)制詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
在Vue.js中，路由與導(dǎo)航不僅涉及頁面切換，還包括了向頁面?zhèn)鬟f參數(shù)和獲取查詢參數(shù)，這篇文章主要介紹了Vue路由參數(shù)與查詢參數(shù)傳遞,需要的朋友可以參考下2023-08-08