Vue3前端開發(fā)，watch數(shù)據(jù)偵聽器的立即執(zhí)行！實際上，我們可以通過回調函數(shù)的后面，再追加一個對象，來設置這個參數(shù)，immediate:true.來實現(xiàn)一種立即執(zhí)行的效果。在頁面記載完成后，馬上就會執(zhí)行一次watch.

<!-- <script setup>
import {ref,watch} from 'vue'
const price = ref(10)
const changeHandel = ()=>{
    price.value++
}
//watch 偵聽單個數(shù)據(jù)源
watch(price,(newVal,oldVal)=>{
    console.log('price變化了',newVal,oldVal);
})
</script> -->
<script setup>
import {onMounted, ref,watch} from 'vue'
//草莓單價
const price = ref(10)
//購物車貨品數(shù)量
const count = ref(0)
//修改草莓單價
const addPrice = ()=>{
    price.value++
}
//修改購物車貨品總數(shù)
const changeHandel=()=>{
    count.value++
}
//watch同時偵聽2個數(shù)據(jù)源的變化案例
// watch([price,count],([newPrice,newCount],[oldPrice,oldCount])=>{
//     console.log('單價發(fā)生變化了或者數(shù)量發(fā)生變化了')
//     console.log('新單價是'+newPrice);
//     console.log('新總數(shù)量是'+newCount);
// })
/**
 * watch的，立即執(zhí)行，immediate：true
 * 這個設置后，會在頁面加載時先執(zhí)行一次回調函數(shù)。
 * 后續(xù)，偵聽到數(shù)據(jù)變化了，當然也會正常觸發(fā)了。
 */
watch(count,(newVal,oldVal)=>{
    console.log('count發(fā)生變化了',newVal,oldVal);
},{
    immediate:true
})
</script>
<template>
    <h3>watch基礎練習</h3>
    <p>草莓的單價:{{ price }}</p>
    <p>購物車總數(shù)量:{{ count }}</p>
    <button @click="addPrice">單價價格+1</button>
    <button @click="changeHandel">貨物數(shù)量+1</button>
</template>

watch(count,(newVal,oldVal)=>{
    console.log('count發(fā)生變化了',newVal,oldVal);
},{
    immediate:true
})

如上所示，我們在回調函數(shù)的后面，追加了一個參數(shù)，是一個對象類型的。里面有一個鍵值對。就是我們要設置的立即執(zhí)行。true。表示啟動立即執(zhí)行效果。

如圖，所示，在頁面渲染完之后，就馬上立即執(zhí)行了一次watch.可以看見，里面的oldval是未定義，因為頁面初始化后，那一刻，我們的購物車總數(shù)量默認是0.需要點擊修改按鈕觸發(fā)修改之后，才會有一個新值，一個舊值。所以顯示的是未定義。后面2個點擊之后，都是正常的。因為已經(jīng)有新舊值交替出現(xiàn)了。

題外話，實際上，在真正的項目開發(fā)時，很多場景都會用到這個立即執(zhí)行。我給大家舉幾個例子。

第一個案例場景：視頻，文章，圖片的閱讀總數(shù)（這個總數(shù)，在客戶打開作品后，首次看見的時候，肯定有一個初始化的數(shù)字，默認是0.但是，往往來說，我們的作品閱讀總數(shù)一直在發(fā)生更改。當?shù)诙€用戶，第三個用戶打開的時候，它的閱讀總數(shù)，早就發(fā)生變化了。因此，有必要借助立即執(zhí)行，給訪客看見當前的最新數(shù)字。至于后面如何操作，那都是進入正常的watch范圍了。）

第二個案例場景：銀行卡余額。實際上，我們的銀行卡余額，在我們初次打開銀行的app頁面，進入我的賬號管理頁面時，肯定會給初始化展示出來，當前我的卡內余額。這個就會用到watch的立即執(zhí)行。后面我們可能會給朋友，親人轉賬，或者在線購物產(chǎn)生消費了。額度會隨時變化的。然后，很快就會再次被watch偵聽到。發(fā)生實時的變化。文章來源地址http://www.zghlxwxcb.cn/news/detail-802344.html

到了這里，關于Vue3前端開發(fā)，watch數(shù)據(jù)偵聽器的立即執(zhí)行的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！