网站设计配色案列,辽宁网站优化,网站如何提交关键词,微信公众号1000阅读量多少钱1.侦听数据源类型
watch 的第一个参数可以是不同形式的“数据源”#xff1a;它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组
const x ref(0)
const y ref(0)// 单个 ref
watch(x, (newX) {console.log(x is ${newX})
…1.侦听数据源类型
watch 的第一个参数可以是不同形式的“数据源”它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组
const x ref(0)
const y ref(0)// 单个 ref
watch(x, (newX) {console.log(x is ${newX})
})// getter 函数
watch(() x.value y.value,(sum) {console.log(sum of x y is: ${sum})}
)// 多个来源组成的数组
watch([x, () y.value], ([newX, newY]) {console.log(x is ${newX} and y is ${newY})
})
2. 在监听响应式对象里的值时,需要提供一个getter函数
const obj reactive({ count: 0 })// 错误因为 watch() 得到的参数是一个 number
watch(obj.count, (count) {console.log(Count is: ${count})
})//正确的
// 提供一个 getter 函数
watch(() obj.count,(count) {console.log(Count is: ${count})}
)
3. 深度监听和立即执行
watch(() state.someObject,(newValue, oldValue) {// 注意newValue 此处和 oldValue 是相等的// *除非* state.someObject 被整个替换了},{ deep: true },
{ immediate: true }
)
4. 一次性侦听器
watch(source,(newValue, oldValue) {// 当 source 变化时仅触发一次},{ once: true }
)
5. watchEffect()
(1)watch只监听明确了的数据源,只有在数据源变化时触发
(2)watchEffect可以监听所有能访问到的响应式属性
1.使用watch
const todoId ref(1)
const data ref(null)watch(todoId,async () {const response await fetch(https://jsonplaceholder.typicode.com/todos/${todoId.value})data.value await response.json()},{ immediate: true }
)2.使用watchEffect
watchEffect(async () {const response await fetch(https://jsonplaceholder.typicode.com/todos/${todoId.value})data.value await response.json()
})这里就会自动追踪 todoId.value 作为依赖,每当 todoId.value 变化时回调会再次执行
6. 如果在监听一个id值时,会执行异步请求,但是如果在请求完成之前 id 发生了变化怎么办
可以使用onWatcherCleanup() API 来注册一个清理函数,重新调用
但是onWatcherCleanup() 只能在同步执行期间调用
import { watch, onWatcherCleanup } from vuewatch(id, (newId) {const controller new AbortController()fetch(/api/${newId}, { signal: controller.signal }).then(() {// 回调逻辑})onWatcherCleanup(() {// 终止过期请求controller.abort()})
})
如果需要在异步时调用,可以使用onCleanup
onCleanup 函数还作为第三个参数传递给侦听器回调以及 watchEffect 作用函数的第一个参数
watch(id, (newId, oldId, onCleanup) {// ...onCleanup(() {// 清理逻辑})
})watchEffect((onCleanup) {// ...onCleanup(() {// 清理逻辑})
})
7.回调的触发时机
正常watch会在dom更新之前调用,但是如果当需要根据数据的变化来执行一些依赖于最新DOM状态的操作时,就需要在DOM更新之后调用,就可以使用flush: post
watch(source, callback, {flush: post
})watchEffect(callback, {flush: post
})----------------------------------watchEffect添加flush: post还可以使用下面的写法:
import { watchPostEffect } from vuewatchPostEffect(() {/* 在 Vue 更新后执行 */
})
8.侦听器一般同步使用,特殊情况会异步使用,而在异步使用时,需要手动的停止侦听器.
script setup
import { watchEffect } from vue// 它会自动停止
watchEffect(() {})// ...这个则不会
setTimeout(() {watchEffect(() {})
}, 100)const unwatch watchEffect(() {})// ...当该侦听器不再需要时
unwatch()
/script
