Vue3.2及以上版本中的watchEffect和watch监听属性的用法

在Vue 3.2及以上版本中，可以使用watchEffect和watch两个API来监听属性。

watchEffect会自动追踪其依赖项，并在任何依赖项更改时重新运行其函数。它类似于Vue 2.x中的computed，但是不需要计算属性本身，它可以直接作为函数传递。

例如，如果您想要监听名为myProp的属性：

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log('myProp has changed:', myProp);
});

每当myProp属性更改时，上述函数都会运行并记录新值。

另一种方式是使用watchAPI，它更类似于Vue 2.x中的watch。我们可以通过在选项中指定要监视的属性来创建一个观察者：

import { watch } from 'vue';

watch(
  () => myProp,
  (newVal, oldVal) => {
    console.log('myProp has changed:', newVal);
  }
);

当myProp属性更改时，上述函数都会运行并记录新值。

需要注意的是，在Vue 3.x中更新响应式属性时，必须使用ref或reactive包装对象的属性。如果你直接尝试更新一个普通对象的属性，Vue不会发现这种变化。所以如果需要监听的属性不是响应式的，需要使用ref或reactive将其包装成响应式的。