vue3-watch、watchEffect偵聽器
watch是用來對動態(tài)綁定的數(shù)據(jù)的變化進(jìn)行監(jiān)聽和操作的一個API。
使用格式為：
watch(監(jiān)聽的字面量，(新值，舊值)=>{
do()
}，
{deep:true} //可選
{flush:sync,pre,post}//3個值可選，sync同步執(zhí)行，pre組件更新之前執(zhí)行，post組件更新之后執(zhí)行。
//flush屬性在watch中用的不多，主要使用在watchEffect中。
)
watchEffect是高級偵聽，可以在偵聽前觸發(fā)一個回調(diào)函數(shù)onvalidate，進(jìn)行防抖之類的操作。
可以使用onTrigger來debugger來調(diào)試 watchEffect
格式：
watchEffect((onvalidate)=>{
do()
}，
{
flush:'post',
onTrigger(e){
do()
}
}
)
<template>
<div>
<input type="text" v-model="mountain.address" />
<br>
<input type="text" v-model="moutain2" />
<br>
<input type="text" v-model="moutain3.name" />
</div>
</template>
<script setup lang="ts">
import { ref, reactive, watch，watchEffect } from "vue";
watch例子：
const mountain =reactive({
name: "峨眉山",
address: "cn",
});
const moutain2 = ref("阿爾卑斯山");
const moutain3=ref({
name:'華山',
honor:'五岳之一'
})
watch(
//監(jiān)聽對象這種引用類型的時候，新值和舊值是相同的，因為在源碼里，是直接把新值賦值給舊值的。
[ mountain, moutain2,moutain3],
(new_val, old_val) => {
console.log(new_val, old_val);
},
{
deep: true, //代表深度監(jiān)聽，可以監(jiān)聽引用類型的數(shù)據(jù)
//reactive不用開啟，源碼已經(jīng)自動開啟。
}
);
watchEffect例子：
const msg = ref<string>("綠草");
const msg2 = ref<string>("牛馬");
const stop = watchEffect(
(onvalidate) => {
const ipt: HTMLInputElement = document.querySelector("#ipt") as HTMLInputElement;
console.log(ipt, "ellllll");
// console.log("msg======>" + msg.value);
// console.log("msg2======>" + msg2.value);
//onvalidate會在監(jiān)聽之前執(zhí)行
onvalidate(() => {
console.log("before");
});
},
{
//可以利用debugger來調(diào)試
flush: "post",
// onTrigger(e) {
// debugger;
// },
}
);
const stopWatch = () => stop(); //以函數(shù)形式調(diào)用watchEffect之后，會停止監(jiān)聽。
</script>
<style scoped>
</style>
浙公網(wǎng)安備 33010602011771號