vue3中的watch 上

vue3 中的watch

接受三個參數：參數1：監聽的數據源 （可以為一個ref或者一個函數） 參數2：回調函數 （newValue, oldValue） => {} 參數3：深度監聽或立即執行的配置（deep: true, imediate: true）

首先展示ref 監聽的常規寫法：

<template>
<div>
{{qdleader}}
<button @click="changeData"></button>
</div>

</template>

<script>

import {ref, toRefs, watch, reactive} from 'vue';

export default {
setup() {
const qdleader = ref('qdleader')
const changeData = () => {
qdleader.value = "我變了"
}
watch(qdleader,(newValue,oldValue) => {
console.log("qdleader發生變化時候",newValue,oldValue)
})
return {
qdleader,
changeData
}
}
}
</script>

2.在state 的寫法中怎麼用呢？注意在這裡你直接寫state.qdleader是不好使的，你要寫() => state.qdleader

<template>
<div>
{{qdleader}}
<button @click="changeData"></button>
</div>
</template>

<script>

import {ref, toRefs, watch, reactive} from 'vue';

export default {
setup() {
const state = {
qdleader:'qdleader',
changeData: () => {
state.qdleader = '我變了'
}
}

watch(() => state.qdleader,(newValue,oldValue) => {
console.log("qdleader發生變化時候",newValue,oldValue)
})
return {
...toRefs(state)
}
}
}
</script>

那什麼時候用第三個參數呢？怎麼用呢？

<template>
<div>
{{qdleader}}
<button @click="changeData"></button>
</div>
</template>

<script>

import {ref, toRefs, watch, reactive} from 'vue';

export default {
setup() {
const state = {
qdleader:'qdleader',
a:{
b:''
},
changeData: () => {
state.a.b = '我變了'
}
}

watch(() => state.a,(newValue,oldValue) => {
console.log("qdleader發生變化時候",newValue,oldValue)
})
return {
...toRefs(state)
}
}
}
</script>

當我們監聽對象屬性時候，監聽a，當a對象中的b發生變化時候，我們會發現，我們根本監聽不到。

這時我們的第三個屬性就閃亮登場了。

<template>
<div>
{{qdleader}}
<button @click="changeData"></button>
</div>
</template>

<script>

import {ref, toRefs, watch, reactive} from 'vue';

export default {
setup() {
const state = {
qdleader:'qdleader',
a:{
b:''
},
changeData: () => {
state.a.b = '我變了'
}
}

watch(() => state.a,(newValue,oldValue) => {
console.log("qdleader發生變化時候",newValue,oldValue)
},{
deep:true, //深度監聽
imediate:true,//一進頁面就監聽
})
return {
...toRefs(state)
}
}
}
</script>

不積跬步無以至千裡，你的付出不會被辜負，前端路一起加油。掃碼回復資料可以領100g前端資料，也可回復加群，加入交流群。

 另有github每日更新精選面試題歡迎star https://github.com/qdleader/qdleader