vuewatch监听对象及对应值的变化（Vue3系列6–watch侦听器和watchEffect高级侦听器）
导读：1watch侦听器 watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用...
1watch侦听器
watch 需要侦听特定的数据源 ，并在单独的回调函数中执行副作用
watch第一个参数监听源 watch第二个参数回调函数cb（newVal,oldVal） watch第三个参数一个options配置项是一个对 { immediate:true //是否立即调用一次 deep:true //是否开启深度监听 }监听Ref 案例：
监听多个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);
})
2watchEffect高级侦听器
立即执行传入的一个函数 ，同时响应式追踪其依赖 ，并在其依赖变更时重新运行该函数 。如果用到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()
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！