watch监听的使用

watch() 函数的作用是监听数据变化，可以监听单个数据或多个数据。

监听单个数据，代码如下。

<template>
  <div>
    <h1>{{ num }}</h1>
    <button @click="num++">+1</button>
  </div>
</template>

<script>
// 1．引用 watch 函数
import { watch, ref } from "vue";

export default {
  setup() {
    var num = ref(10);
    // 2．使用 watch 函数监听 num 数据
    watch(num, (newValue, oldValue) => {
      // newValue 是新数据
      // oldValue 是旧数据
      console.log(newValue, oldValue);
    });
    return {
      num,
    };
  },
};
</script>

监听多个数据，代码如下。

<template>
  <div>
    <h1>{{ num }}</h1>
    <h1>{{ num1 }}</h1>
    <button @click="addNum">+1</button>
  </div>
</template>

<script>
// 1．引用 watch 函数
import { watch, ref, reactive } from "vue";

export default {
  setup() {
    var num = ref(10);
    var num1 = ref(20);
    // 2．在 watch 函数中使用数组形式监听 num 和 num1 数据
    watch(
      [num, num1],
      ([newNum, newNum1], [oldNum, oldNum1]) => {
        console.log(newNum, oldNum);
        console.log(newNum1, oldNum1);
      }
    );
    var addNum = () => {
      num.value++;
      num1.value++;
    };
    return {
      num,
      num1,
      addNum,
    };
  },
};
</script>