watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用

  • watch第一个参数监听源，监听多个ref 注意变成数组啦
  • watch第二个参数回调函数cb（newVal,oldVal）
  • watch第三个参数一个options配置项是一个对象
    1. {
    2. immediate: true //是否立即调用一次
    3. deep: true //是否开启深度监听
    4. }

immediate: true 是否立即调用一次

  1. <script setup lang="ts">
  2. import { watch, ref } from "vue";
  3. let msg = ref("小雪");
  4. let msg1 = ref("小满");
  6. watch(
  7.   [msg, msg1],
  8.   (newVale, oldVal) => {
  9.     console.log("新", newVale);
  10.     console.log("旧", oldVal);
  11.   },
  12.   {
  13.     immediate: true,
  14.   }
  15. );
  16. </script>
  18. <template>
  19.   <input type="text" v-model="msg" />
  20.   <input type="text" v-model="msg1" />
  21. </template>

image.png

deep:true是否开启深度监听

  1. <script setup lang="ts">
  2. import { watch, ref } from "vue";
  3. let msg = ref({
  4.   nav:{
  5.     bar:{
  6.       name:"小雪"
  7.     }
  8.   }
  9. });
  11. watch(
  12.   msg,
  13.   (newVale, oldVal) => {
  14.     console.log("新", newVale);
  15.     console.log("旧", oldVal);
  16.   }
  17. );
  18. </script>
  20. <template>
  21.   <input type="text" v-model="msg.nav.bar.name" />
  22. </template>
  24. <style></style>

没有任何打印结果，加了deep:true以后：
image.png
这是Vue的一个Bug，新值旧值一样

监听Reactive

使用reactive监听深层对象开启和不开启deep 效果一样

  1. <script setup lang="ts">
  2. import { watch, ref,reactive } from "vue";
  3. let msg = reactive({
  4.   nav:{
  5.     bar:{
  6.       name:"小雪"
  7.     }
  8.   }
  9. });
  11. watch(
  12.   msg,
  13.   (newVale, oldVal) => {
  14.     console.log("新", newVale);
  15.     console.log("旧", oldVal);
  16.   }
  17. );
  18. </script>
  20. <template>
  21.   <input type="text" v-model="msg.nav.bar.name" />
  22. </template>

监听reactive 单一值

  1. <script setup lang="ts">
  2. import { watch, ref, reactive } from "vue";
  3. let msg = reactive({
  4.   name1: "小雪",
  5.   name2: "小兰",
  6. });
  8. watch(
  9.   () => msg.name1,
  10.   (newVale, oldVal) => {
  11.     console.log("新", newVale);
  12.     console.log("旧", oldVal);
  13.   }
  14. );
  15. </script>
  17. <template>
  18.   <input type="text" v-model="msg.name1" />
  19.   <input type="text" v-model="msg.name2" />
  20. </template>

image.png
用reactive可以不写deep也能监听到
image.png

image.png