vue3 监听一个属性watch

在Vue3中，可以使用`watch`函数来监听一个属性。下面是一个示例：

import { watch } from 'vue';

export default {
  data() {
    return {
      msg: '测试数据',
      obj: { a: 1 }
    };
  },
  created() {
    watch(
      () => this.msg,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      }
    );

    watch(
      () => this.msg,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      { immediate: true }
    );

    watch(
      () => this.obj,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      { immediate: true, deep: true }
    );
  }
};

这个示例中，我们使用`watch`函数来监听`msg`属性和`obj`属性的变化。第一个`watch`函数监听`msg`属性的变化，并在变化时打印新值和旧值。第二个`watch`函数也监听`msg`属性的变化，但设置了`immediate: true`选项，表示立即执行监听函数。第三个`watch`函数监听`obj`属性的变化，并设置了`immediate: true`和`deep: true`选项，表示立即执行监听函数，并且进行深度监听。