watch介绍
vue中watch用来监听数据的响应式变化.获取数据变化前后的值
watch监听器可以监听一个getter函数,这个getter要返回一个响应式对象
当该对象更新后,会执行对应的回调函
// watch的完整入参
watch(监听的数据,副作用函数,配置对象)
watch(data, (newVal, oldVal) => {}, {immediate: true, deep: true})
watch监听的不同场景
import { ref, watch, reactive } from "vue";
// 创建响应式数据
let name = ref("小红");
let age = ref(18);
let state = reactive({
sex: "女",
city: {
hainan: {
haikoushi: "海口市",
},
},
});
监听单个refimpl数据
watch(name, (newName, oldName) => {
console.log("newName", newName);
});
监听多个refimpl数据,任何一个响应式对象更新,就会执行回调函数
方式一:vue3允许多个watch监听器存在
watch(name, (newValue, oldValue) => {
console.log("new", newValue, "old", oldValue);
});
watch(age, (newValue, oldValue) => {
console.log("new", newValue, "old", oldValue);
});
方式二:将需要监听的数据添加到数组
//第一种写法
watch([name, age], (newValue, oldValue) => {
// 返回的数据是数组
console.log("new", newValue, "old", oldValue);
//[newName, newAge] [oldName, oldAge]
});
//还有第二种写法
watch([name, age], ([newName, newAge], [oldName, oldAge]) => {
})
监听proxy数据
监听 reactive 定义的响应式数据
此时vue3将强制开启deep深度监听
当监听值为proxy对象时,oldValue值将出现异常,此时与newValue相同newValue=== oldValue,根本就是同一个内容地址,就是对象本身
// 监听proxy对象
watch(state, (newValue, oldValue) => {
console.log("newValue", newValue, "oldValue", oldValue);
});
监听proxy数据的某个属性
需要将监听值写成函数返回形式,vue3无法直接监听对象的某个属性变化
监听的属性值是基本类型数据,需要写成函数返回该属性的方式才能监听到
扫描二维码关注公众号,回复: 15785022 查看本文章
watch(
() => state.sex,
(newValue, oldValue) => {
console.log("newValue",newValue, "oldvalue", oldValue);
}
);
当监听proxy对象的属性为复杂数据类型时,需要开启deep深度监听
watch(
() => person.city,
(newvalue, oldvalue) => {
console.log("person.city newvalue", newvalue, "oldvalue", oldvalue);
},{ deep: true , immediate: true }
);
监听proxy数据的某些属性
watch([() => state.age, () => state.name], (newValue, oldValue) => {
// 此时newValue为数组
console.log("state.age", newValue, oldValue);
});
watchEffect的使用
watchEffect会立即执行;
不需要手动传入所需要监听的数据;
接收的参数为一个回调函数;
只能获取新值,无法获取修改之前的值
// 监听数据
watchEffect(() => {
console.log(state.sex,'--',state.city)
});
停止监听
// 监听数据
let stop = watchEffect(() => {
console.log(state.sex,'--',state.city)
setTimeout(()=>{
stop();
},3000);
});
总结
监听reactive定义的proxy代理数据时
oldValue无法正确获取
强制开启deep深度监听(无法关闭)
监听reactive定义的proxy代理对象某个属性时deep配置项生效