1. 定义监听器
//要监视的属性被改变时触发
watch(要监视的属性, (更改后的心值, 更改前的旧值) => {具体操作},
);//监视对象为getter的时候
//表达式内任意响应式属性被改变时触发
watch(() => return表达式, (表达式的新值, 表达式的旧值) => {具体操作}
);//数组中任意下标数据被改变时触发
watch(value1, value2,....], ([value1改变后的值, value2改变后的值,...valuen改变后的值]) => {具体操作}
);//对象内任意属性被改变时
watch(obj对象, (对象的新值, 对象的旧值) => {具体操作,但需要注意这时对象的新值和对象的旧值是相等的,显示对象新值
});//当对象下某个属性发生改变时,监视对象下某一属性
watch(() => 对象的属性,(对象属性的新值, 对象属性的旧值) => {具体操作}
);//使用watchEffect监视
watchEffect(()=>{函数式,在函数式中定义的属性被改变时触发
})
2. 监听器的配置项
开启深层监听:deep: true
强制监视器立即执行:immediate: true
一次性监听:once: true
监听器回调中访问被vue更新之后的所有组件dom:flush: ‘post’
同步触发监听器,会在Vue进行任何更新之前触发:flush: ‘sync’
3. 监听器实例
<template><div>{{ count }}</div><br /><button @click="addcount">count++</button><br /><div>{{ obj.nums }}</div><br /><button @click="addobjnums">obj.nums++</button><br><button @click="addobjnums2">obj.nums2++</button>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
name: "App";
let count = ref(0);
let x = ref(5);
let obj = reactive({nums: 1,nums2: 2,
});//使用immediate: true 配置项实现在页面初始化时就执行此监视属性
watch(count, (newValue, oldValue) => {console.log("---------这个是页面初始化出来的/如果你第二次看见我则是count值发生改变时看到的------");console.log("count原始值:", oldValue);console.log("count更改后的值:", newValue);},{ immediate: true }
);//单纯监视count是否有变化,
//监视函数会获得俩个参数,第一个为更新后的值,第二个为更新前的值
watch(count, (newValue, oldValue) => {console.log("----------------------------监视单个ref-----------------------");console.log("count原始值:", oldValue);console.log("count更改后的值:", newValue);
});//监视对象为getter的时候
watch(() => count.value + x.value,(newValue, oldValue) => {console.log("----------------------------监视getter函数-----------------------");console.log("getter原始值:", oldValue);console.log("count更改后getter函数的值:", newValue);}
);//监视对象来源于一个数组,没有找到获取原来值的写法
watch([count, () => x.value + 1], ([newCount, newX]) => {console.log("-----------------------监视多个来源组成的数组-------------------");console.log("count更改后的值:", newCount);console.log("x+1后的值:", newX);
});//当监视对象为整个对象时
//这时newValue和oldValue是相等的,因为是同一个对象
watch(obj, (newValue, oldValue) => {console.log("----------------------------监视整个对象时-----------------------");console.log("obj原始值:", oldValue);console.log("obj更改后的值:", newValue);
});//当监视对象为对象属性时,需监视其对象属性的getter函数
//这个触发条件仅仅是obj.nums被修改的时候出发
watch(() => obj.nums,(newValue, oldValue) => {console.log("----------------------------监视对象下单个属性-----------------------");console.log("obj.nums原始值:", oldValue);console.log("obj.nums更改后的值:", newValue);}
);//看起来是监视了obj对象下的nums属性,
//其实是通过deep:true选项开启了深层监听器
//其返回的原值和新值为obj对象的值,而不是obj.nums单个
//注意这个非常耗费资源,是遍历实现的
watch(() => obj.nums,(newValue, oldValue) => {console.log("------------开启深层监听器检测obj下的所有属性只要其中一个发生改变就会输出整个obj对象------------");console.log("obj原始值:", oldValue);console.log("obj更改后的值:", newValue);},{ deep: true }
);//使用once: true 配置项实现此监视只执行一次
watch(count, (newValue, oldValue) => {console.log("---------这个只会看到一次------");console.log("count原始值:", oldValue);console.log("count更改后的值:", newValue);},{ once: true }
);//使用watchEffect可以不写监视属性
//在匿名函数中存在的属性被修改时会触发
watchEffect(()=>{count.value++
})function addcount() {count.value++;
}
function addobjnums() {obj.nums++;
}
function addobjnums2() {obj.nums2++;
}
</script><style scoped>
</style>
4. 监听器其他
watchEffect()
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 }
)
使用watchEffect()函数后
watchEffect(async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()
})
watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：
watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。
Post Watchers
如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM，你需要指明 flush: ‘post’ 选项：
watch(source, callback, {flush: 'post'
})watchEffect(callback, {flush: 'post'
})
后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()：
import { watchPostEffect } from 'vue'watchPostEffect(() => {/* 在 Vue 更新后执行 */
})
同步侦听器
你还可以创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发：
watch(source, callback, {flush: 'sync'
})watchEffect(callback, {flush: 'sync'
})
同步触发的 watchEffect() 有个更方便的别名 watchSyncEffect()：.
import { watchSyncEffect } from 'vue'watchSyncEffect(() => {/* 在响应式数据变化时同步执行 */
})
停止侦听器
在 setup() 或
一个关键点是，侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。如下方这个例子：
<script setup>
import { watchEffect } from 'vue'// 它会自动停止
watchEffect(() => {})// ...这个则不会！
setTimeout(() => {watchEffect(() => {})
}, 100)
</script>
要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：
const unwatch = watchEffect(() => {})// ...当该侦听器不再需要时
unwatch()
注意，需要异步创建侦听器的情况很少，请尽可能选择同步创建。如果需要等待一些异步数据，你可以使用条件式的侦听逻辑：
// 需要异步请求得到的数据
const data = ref(null)watchEffect(() => {if (data.value) {// 数据加载后执行某些操作...}
})
