watch函數(shù)

作用：偵聽(tīng)一個(gè)或者多個(gè)數(shù)據(jù)的變化，數(shù)據(jù)變化時(shí)執(zhí)行回調(diào)函數(shù)
兩個(gè)額外參數(shù)：
1.immediate（立即執(zhí)行）2.deep（深度偵聽(tīng)）

場(chǎng)景：比如選擇不同的內(nèi)容請(qǐng)求后端不同數(shù)據(jù)時(shí) 如下圖

基礎(chǔ)使用—偵聽(tīng)單個(gè)數(shù)據(jù)

1.導(dǎo)入watch函數(shù)
2.執(zhí)行watch函數(shù)傳入要偵聽(tīng)的響應(yīng)式數(shù)據(jù)（ref對(duì)象）和回調(diào)函數(shù)

<script setup>// 1. 導(dǎo)入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 調(diào)用watch 偵聽(tīng)變化watch(count, (newValue, oldValue)=>{console.log(`count發(fā)生了變化，老值為${oldValue},新值為${newValue}`)})
</script>

基礎(chǔ)使用—偵聽(tīng)多個(gè)數(shù)據(jù)

說(shuō)明：同時(shí)偵聽(tīng)多個(gè)響應(yīng)式數(shù)據(jù)的變化，不管拿個(gè)數(shù)據(jù)變化都需要執(zhí)行回調(diào)

<script setup>// 1. 導(dǎo)入watchimport { ref, watch } from 'vue'const count = ref(0)const name = ref('cp')// 2. 調(diào)用watch 偵聽(tīng)變化watch([count, name], ([newCount, newName],[oldCount,oldName])=>{console.log(`count或者name變化了，[newCount, newName],[oldCount,oldName])})
</script>

額外參數(shù)——immediate

在偵聽(tīng)器創(chuàng)建時(shí)立即出發(fā)回調(diào)，響應(yīng)式數(shù)據(jù)變化之后繼續(xù)執(zhí)行回調(diào)

<script setup>// 1. 導(dǎo)入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 調(diào)用watch 偵聽(tīng)變化watch(count, (newValue, oldValue)=>{console.log(`count發(fā)生了變化，老值為${oldValue},新值為${newValue}`)},{immediate: true})
</script>

額外參數(shù)——deep

通過(guò)watch監(jiān)聽(tīng)的ref對(duì)象默認(rèn)是淺層偵聽(tīng)的，直接修改嵌套的對(duì)象屬性不會(huì)觸發(fā)回調(diào)執(zhí)行，需要開(kāi)啟deep

！！！ deep有性能損耗 在絕大數(shù)情況下不建議開(kāi)啟

<script setup>// 1. 導(dǎo)入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 監(jiān)聽(tīng)對(duì)象statewatch(state, ()=>{console.log('數(shù)據(jù)變化了')})const changeStateByCount = ()=>{// 直接修改不會(huì)引發(fā)回調(diào)執(zhí)行state.value.count++}
</script>

<script setup>// 1. 導(dǎo)入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 監(jiān)聽(tīng)對(duì)象state 并開(kāi)啟deepwatch(state, ()=>{console.log('數(shù)據(jù)變化了')},{deep:true})const changeStateByCount = ()=>{// 此時(shí)修改可以觸發(fā)回調(diào)state.value.count++}
</script>

精準(zhǔn)偵聽(tīng)對(duì)象的某個(gè)屬性

需求：在不開(kāi)啟deep的前提下，偵聽(tīng)age的變化，只有age變化時(shí)才執(zhí)行回調(diào)

watch（（）=> state.value.age,（）=> {console.log('age發(fā)生變化了')}
）

總結(jié)

1??作為watch函數(shù)的第一個(gè)參數(shù)，ref對(duì)象需要添加.value嗎？
不需要，watch會(huì)自動(dòng)讀取

2??watch只能偵聽(tīng)單個(gè)數(shù)據(jù)嗎？
單個(gè)或者多個(gè)

3??不開(kāi)啟deep，直接修改嵌套屬性能觸發(fā)回調(diào)嗎？
不能，默認(rèn)是淺層偵聽(tīng)

4??不開(kāi)啟deep，想再某個(gè)層次比較深的屬性變化時(shí)執(zhí)行回調(diào)怎么做？
可以把第一個(gè)參數(shù)寫(xiě)成函數(shù)的寫(xiě)法，返回要監(jiān)聽(tīng)的具體屬性