目录

watch监听

watchEffect函数

---

watch监听

• 监听ref定义的一个响应式数据（ref函数定义的数据不要.value）

let num = ref(1);watch(sum, (newVal,oldVal) => {console.log(newVal,oldVal);
})

• 监听ref定义的多个响应式数据

let num = ref(1);
let str = ref('拉拉拉');watch([sum, str], (newVal,oldVal) => {console.log(newVal,oldVal);// newVal和oldVal返回的是监听的数据修改之前和修改之后的数组
})

• 初始化页面时执行一次监听 （immediate）

let num = ref(1);watch(sum, (newVal,oldVal) => {console.log(newVal,oldVal);
},{immediate: true})

• watch监听reactive定义的响应式数据

1. 无法获取oldValue数据
2. 强制开启了深度监视，且deep参数配置无效

let info = reactive({name: "韩梅梅",age : 18,
});watch(info, (newVal) => {console.log(newVal);
})

• watch监听reactive定义的响应式数据中的某个属性

let info = reactive({name: "韩梅梅",age : 18,
});watch(() => info.age, (newVal, oldVal) => {console.log(newVal, oldVal);
})

•  watch监听reactive定义的响应式数据中的某些属性

let info = reactive({name: "韩梅梅",age : 18,
});watch([() => info.name, () => info.age], (newVal, oldVal) => {console.log(newVal, oldVal);
})

• watch监听reactive定义的对象中的某个属性，deep配置生效

let info = reactive({name: "韩梅梅",age : 18,obj: {obj1: {str: "字符串"}},
});watch(() => info.age, (newVal, oldVal) => {console.log(newVal, oldVal);
})

---

watchEffect函数

let name = ref('韩梅梅');watchEffect(() => {let newName = name;// 函数体中使用到了谁就相当于监听谁，因为newName使用了ref函数定义的name数据，所以相当于监听了name数据
});