网站建设包括网页设计,中国建设招标网官方网站,公司网站建设升上去,松岗网站watch函数用于侦听某个值的变化#xff0c;当该值发生改变后#xff0c;触发对应的处理逻辑。
一、watch的基本实例
templatedivdiv{{ count }}/divbutton clickchangCount更改count的值/button/div
… watch函数用于侦听某个值的变化当该值发生改变后触发对应的处理逻辑。
一、watch的基本实例
templatedivdiv{{ count }}/divbutton clickchangCount更改count的值/button/div
/templatescript setup
import {ref,reactive, watch} from vue
const count ref(0)
function changCount(){count.value
}
watch(count,(newValue,oldValue){if(newValue){console.log(我侦听到了count状态的变化当前值为${newValue},从而处理相关逻辑);}
})
/scriptstyle/style
二、watch监听多个数据
getter 函数
templatedivdiv{{ x }}/divbutton clickchangCount更改count的值/button/div
/templatescript setup
import { ref, reactive, watch } from vue;
const x ref(1);
const y ref(5);
function changCount() {x.value;
}
watch(() x.value y.value,(sum) {console.log(我是x与y之和${sum});}
);
/scriptstyle
/style
多个来源组成的数组
templatedivdiv{{ x }}/divbutton clickchangCount更改count的值/button/div
/templatescript setup
import { ref, reactive, watch } from vue;
const x ref(1);
const y ref(5);
function changCount() {x.value;
}
watch([x,y],([x,y]) {console.log(我是x${x},我是y》${y});}
);
/scriptstyle
/style
三、watch监听对象的值
templatedivdiv{{ obj.name }}/divbutton clickchangObj更改count的值/button/div
/templatescript setup
import { ref, reactive, watch } from vue;
const obj ref({name:你好})
function changObj(){obj.value.name我不好
}
watch(()obj.value.name,(name){console.log(name);
})
/scriptstyle
/style
四、watch监听器的配置参数
1.deep
用于开启深度监听
templatedivdiv{{ obj.name }}/divbutton clickchangObj更改count的值/button/div
/templatescript setup
import { ref, reactive, watch, watchEffect } from vue;
const obj ref({name:你好})
function changObj(){obj.value.name我不好
}
// obj是一个RefImpl对象当不开启深度监听的时候监听obj无法检测到obj属性的变化
watch(obj,(){console.log(obj.value.name);
}, { deep: true })
/scriptstyle
/style
2.immediate
是否开启初始化检测默认是值发生变化时才会执行监听器里面的方法开启immediate后初始化就执行一次。
templatedivdiv{{ obj.name }}/divbutton clickchangObj更改count的值/button/div
/templatescript setup
import { ref, reactive, watch, watchEffect } from vue;
const obj ref({name:你好})
function changObj(){obj.value.name我不好
}
// obj是一个RefImpl对象当不开启深度监听的时候监听obj无法检测到obj属性的变化
watch(obj,(){console.log(obj.value.name);
}, { deep: true,immediate:true })
/scriptstyle
/style
五、通过watchEffect()简化watch
侦听器的回调使用与源完全相同的响应式状态是很常见的。例如
templatedivdiv{{ obj.name }}/divbutton clickchangObj更改count的值/button/div
/templatescript setup
import { ref, reactive, watch, watchEffect } from vue;
const obj ref({name:你好})
function changObj(){obj.value.name我不好
}
watch(obj.value,(){console.log(obj.value.name);
})
/scriptstyle
/style
我们可以使用watchEffect 函数来简化上面的代码。watchEffect() 允许我们自动跟踪回调的响应式依赖。上面的侦听器可以重写为
templatedivdiv{{ obj.name }}/divbutton clickchangObj更改count的值/button/div
/templatescript setup
import { ref, reactive, watch, watchEffect } from vue;
const obj ref({name:你好})
function changObj(){obj.value.name我不好
}
// watch(obj.value,(){
// console.log(obj.value.name);
// })
watchEffect((){console.log(obj.value.name);
})
/scriptstyle
/style
注需要注意的是watchEffect 回调会立即执行不需要指定immediate
六、watch vs. watchEffect
watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式 watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖因此我们能更加精确地控制回调函数的触发时机。 watchEffect则会在副作用发生期间追踪依赖。它会在同步执行过程中自动追踪所有能访问到的响应式属性。这更方便而且代码往往更简洁但有时其响应性依赖关系会不那么明确。
七、回调触发机制与停止监听器
如果想在侦听器回调中能访问被 Vue 更新之后的 DOM你需要指明 flush: post 选项
watch(source, callback, {flush: post
})watchEffect(callback, {flush: post
})
停止监听
在 setup() 或 script setup 中用同步语句创建的侦听器会自动绑定到宿主组件实例上并且会在宿主组件卸载时自动停止。因此在大多数情况下你无需关心怎么停止一个侦听器。
一个关键点是侦听器必须用同步语句创建如果用异步回调创建一个侦听器那么它不会绑定到当前组件上你必须手动停止它以防内存泄漏。如下方这个例子
// ...当该侦听器不再需要时
unwatch()
