08. watch

watch基本数据类型

监听单个数据例子

<script setup>
import { ref, watch } from "vue";
const num = ref(0);
watch(num, (newVal, oldVal) => {
  console.log(`num的值被修改了，新值是：${newVal}，旧值是${oldVal}`);
});
</script>

监听多个数据例子

<script setup>
import { ref, watch } from "vue";

const num1 = ref(0);
const num2 = ref(0);
watch(
  [num1, num2],
  ([newNum1, newNum2], [oldNum1, oldNum2]) => {
    console.log(`num1或者num2的值被修改了，`, [newNum1, newNum2], [oldNum1, oldNum2]);
  });
</script>

监听多个数据，watch用数组的形式接收被监听的数据，回调函数的参数也是数组

watch对象类型

监听对象的某一个属性

import { ref, watch } from "vue";
const data = ref({
  num: 0,
});
watch(
  () => data.value.num, // 注意这里的差异！！！
  (newVal, oldVal) => {
    console.log(`data.num的值被修改了，新值是：${newVal}，旧值是${oldVal}`);
  }
);
</script>

监听整个数据

<script setup>
import { ref, watch } from "vue";
const data = ref({
  num: 0,
});
watch(
  () => data,
  (newVal, oldVal) => {
    console.log(`data被修改了，新值是：${JSON.stringify(newVal.value)}，旧值是${JSON.stringify(oldVal.value)}`);
  }, {
    deep: true
  }
);
</script>

tips：需要注意点是，监听对象里的数组是深度监听，需要添加deep

运行上面的例子会发现oldVal.value和newVal.value的值一模一样，这里需要按以下的方式处理下。

<script setup>
import { ref, watch, computed } from "vue";
const data = ref({
  num: 0,
});
const cdata = computed(() => ({
  dataNew: JSON.stringify(data.value)
}))
watch(
  () => cdata.value.dataNew,
  (newVal, oldVal) => {
    console.log(`data被修改了，新值是：${newVal}，旧值是${oldVal}`);
  }, {
  deep: true
}
);
</script>

原理和vue2是一样的。vue2的处理方式看这里 http://111.230.246.226:8080/article/56

watchEffect

watchEffect是监听当前组件的所有数据，如果有某一个数据发生改变，则立即执行。

<template>
  <div>
    <p>{{ data.num }}</p>
    <button @click="add">+</button>
  </div>
</template>
<script setup>
import { ref, reactive, watchEffect } from "vue";

const data = reactive({
  num: 0,
  list: [],
});
const flag = ref(false);

const add = () => {
  data.num++;
  if (data.num > 5) {
    data.list.push(data.num);
    flag.value = true;
  }
};
watchEffect(() => {
  console.log(data.num);
  console.log(data.list);
  console.log(flag.value)
});
</script>

flag变量以及data对象中的num、list，这3个值只要发生改变，都会触发watchEffect执行回调函数。

tips：注意watchEffect会自己先调用一次