1 watch偵聽器
watch 需要偵聽特定的資料源，并在單獨的回呼函式中執行副作用
- watch第一個引數監聽源
- watch第二個引數回呼函式cb（newVal,oldVal）
- watch第三個引數一個options配置項是一個對
- {
- immediate:true //是否立即呼叫一次
- deep:true //是否開啟深度監聽
- }
監聽Ref 案例：
import { ref, watch } from 'vue'
let message = ref({
nav:{
bar:{
name:""
}
}
})
watch(message, (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('舊的值----', oldVal);
},{
immediate:true,
deep:true
})
監聽多個ref 注意變成陣列：
import { ref, watch ,reactive} from 'vue'
let message = ref('')
let message2 = ref('')
watch([message,message2], (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('舊的值----', oldVal);
})
監聽Reactive：使用reactive監聽深層物件開啟和不開啟deep 效果一樣
import { ref, watch ,reactive} from 'vue'
let message = reactive({
nav:{
bar:{
name:""
}
}
})
watch(message, (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('舊的值----', oldVal);
})
監聽reactive 單一值
import { ref, watch ,reactive} from 'vue'
let message = reactive({
name:"",
name2:""
})
watch(()=>message.name, (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('舊的值----', oldVal);
})
2 watchEffect高級偵聽器
立即執行傳入的一個函式，同時回應式追蹤其依賴，并在其依賴變更時重新運行該函式，如果用到message 就只會監聽message 就是用到幾個監聽幾個 而且是非惰性 會默認呼叫一次，
let message = ref<string>('')
let message2 = ref<string>('')
watchEffect(() => {
//console.log('message', message.value);
console.log('message2', message2.value);
})
清除副作用：就是在觸發監聽之前會呼叫一個函式可以處理你的邏輯例如防抖
import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
watchEffect((oninvalidate) => {
//console.log('message', message.value);
oninvalidate(()=>{
})
console.log('message2', message2.value);
})
停止跟蹤 watchEffect 回傳一個函式 呼叫之后將停止更新
const stop = watchEffect((oninvalidate) => {
//console.log('message', message.value);
oninvalidate(()=>{
})
console.log('message2', message2.value);
},{
flush:"post",// pre:組件更新前執行;sync:強制效果始終同步觸發,post:組件更新后執行
onTrigger () { //onTrigger 可以幫助我們除錯 watchEffect
}
})
stop()
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501117.html
標籤：其他
下一篇：頂象首期業務安全月報來了！