watch-compute-watchEffect
computed
形式
computed(ontrack,ontrigger)
ontrackj会在某和响应式prop或者re f作为依赖被追踪时调用
ontrigger:会在侦听回调被某个依赖的修改触发时调用
const plusOne = computed(() => count.value + 1, {
onTrack(e) {
// 当 count.value 作为依赖被追踪时触发
debugger
},
onTrigger(e) {
// 当 count.value 被修改时触发
debugger
}
})
// 访问 plusOne,应该触发 onTrack
console.log(plusOne.value)
// 修改 count.value,应该触发 onTrigger
count.value++
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) => {
oninvalidate(()=>{
//防抖代码....
})
console.log('message2', message2.value);
})
停止跟踪 watchEffect 返回一个函数 调用之后将停止更新
const stop = watchEffect((oninvalidate) => {
oninvalidate(()=>{
//防抖代码....
})
console.log('message2', message2.value);
}))
stop()
额外的配置选项
副作用刷新时机 flush 一般使用post
pre | sync | post | |
---|---|---|---|
更新时机 | 组件更新前执行 | 强制效果始终同步触发 | 组件更新后执行 |
onTrigger 可以帮助我们调试 watchEffect
const stop = watchEffect((oninvalidate) => {
//console.log('message', message.value);
oninvalidate(()=>{
})
console.log('message2', message2.value);
},{
flush:"post", //dom
onTrigger () {
}
})
stop()
停止侦听:当watchEffect在组件的setup函数上运用或者在生命周期钩子上被调用,侦听器会被链接到该组件的生命周期,在组件卸载的时候自动停止。
watch
watch需要侦听具体的数据源,并在回调函数中执行副作用,默认情况下,他是惰性的,只有当数据源发生变化时才执行回调
参数:(监听源,回调函数cb(newVal,oldVal),第三个参数一个options配置项是一个对象{深度监听deep,立刻调用一次immediate}
与 watchEffect 比较,watch
允许我们:
-
懒执行副作用;
-
更具体地说明什么状态应该触发侦听器重新运行;
-
访问侦听状态变化前后的值。
<template> <div> <input type="text" v-model="message"> </div> </template> <script setup lang="ts"> import { ref, reactive,watch } from 'vue'; let message = ref<string>('') watch(message,(newValue,oldValue)=>{ console.log("新的",newValue); console.log("旧的",oldValue); },{ deep:true, immediate:true }) // 开启深度监听才能监听层级较深的对象,但是也有问题 // immediate:true在created之前就执行至此watch </script> <style scoped> </style>
监听多个ref的也可以,watch的第一项用数组
import { ref, watch ,reactive} from 'vue' let message = ref('') let message2 = ref('') watch([message,message2], (newVal, oldVal) => { console.log('新的值----', newVal); console.log('旧的值----', oldVal); })
监听一个对象里面的单一项,watch的第一项为函数得到某一项
import { ref, watch ,reactive} from 'vue'
let message = reactive({
name:"",
name2:""
})
//watch的第一项可以改为函数
watch(()=>message.name, (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('旧的值----', oldVal);
})