数据
let num = ref(0);
let msg = ref('你好');
let person = reactive({
name: 'zs',
age: 13,
job: {
j1: {
salary: 20,
},
},
});
vue2中的写法
watch: {
//简写
// num(newVal, oldVal) {
// console.log('num值变化了', newVal, oldVal);
// },
//完整写法,可以配置参数
num: {
immediate: true, //刷新页面立即触发
deep: true, //深度监听
handler(newVal, oldVal) {
console.log('num值变化了', newVal, oldVal);
},
},
},
vue3中的写法
情况一,监视 ref 所定义的一个响应式数据
watch(num, function (newVal, oldVal) {
console.log('num值变化了', newVal, oldVal);
},{immediate:true,deep:true});
//num值变化了 4 3
情况二,监视 ref 所定义的多个响应式数据
watch([num, msg], function (newVal, oldVal) {
console.log('num或msg值变化了', newVal, oldVal);
},{ immediate: true });
//num或msg值变化了 (2) [1, '你好'] (2) [0, '你好']
情况三,监视 reactive 所定义的一个响应式数据
1.注意:此处无法正确获取oldVal
2.注意:强制开启了深度监视,(deep配置无效)
watch(person, (newVal, oldVal) => {
console.log('person值变化了', newVal, oldVal);
},{deep:true});//此处的deep配置无效
输出结果:
情况四,监视 reactive 所定义的一个响应式数据中的某个属性,(需要写到函数里面)
watch(()=>person.age, (newVal, oldVal) => {
console.log('person.age值变化了', newVal, oldVal);
});
//person.age值变化了 14 13
情况五,监视 reactive 所定义的一个响应式数据中的某些属性,(需要用数组包裹,在写到函数里面)
watch([()=>person.age,()=>person.name], (newVal, oldVal) => {
console.log('person.age或.name值变化了', newVal, oldVal);
});
输出结果:
特殊情况
watch(()=>person.job, (newVal, oldVal) => {
console.log('person.job值变化了', newVal, oldVal);
},{deep:true});//此处由于监视的是reactive所定义的对象中的某个属性,所以deep配置有效
输出结果:
watchEffect
watch 的套路是:既要指明监视的属性,也要指明监视的回调
watchEffect 的套路是:不用指明监视哪个属性,监视的回掉中用到那个属性,那就监视哪个属性
watchEffect 有点像computed:
- 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值
- 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值
watchEffect(() => {
const s = msg.value;
console.log('watchEffect执行了当前信息', s);
});
//每次修改msg都会执行
总结:
1.监视 ref 所定义的一个响应式数据(可以正常拿到 newVal oldVal)
2.监视 ref 所定义的多个响应式数据(可以正常拿到 newVal oldVal, 吧监视的属性放到数组里面)
3.监视 reactive 所定义的一个响应式数据(监视对象)(无法正确获取 oldVal,强制开启了深度监视,deep配置无效)
4.监视 reactive 所定义的一个响应式数据中的某个属性(监视对象中的某个属性,如果监视的属性是个对象,需要开启深度监视 deep),(可以正常拿到 newVal oldVal,监视的属性需要写到函数里面)
5.监视 reactive 所定义的一个响应式数据中的某些属性(监视对象中的某些属性),(可以正常拿到 newVal oldVal,需要用数组包裹,在写到函数里面)