一、基础使用 - 侦听单个数据

image.png

二、基础使用 - 侦听多个数据

不管哪个数据变了，都需要监听的到

image.png

三、immediate

说明：在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调

image.png

四、deep

deep 深度监视，默认 watch 进行的是 浅层监视
const ref1 = ref(简单类型) 可以直接监视
const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化
这个时候需要deep开启深监听

<script setup>
import { watch, ref } from "vue";
const userInfo = ref({
  name: "zs",
  age: 18,
});

const setUserInfo = () => {
  // 修改了 userInfo.value 修改了对象的地址，才能监视到
  // userInfo.value = {name: "zs",age: 18}
  userInfo.value.age++;
};

watch(
  userInfo,
  (newVal) => {
    console.log(newVal);
  },
  { deep: true }
);
</script>

五、精确侦听对象的某个属性

需求：在不开启deep的前提下，侦听age的变化，只有age变化时才执行回调

image.png

六、总结

image.png