vue3 监听方法被调用

Vue 3 提供了响应式系统，其中的 Composition API 可以让开发者更灵活地管理状态和副作用。在 Vue 3 中，可以通过 `watch` 或 `watchEffect` 函数来监听数据变化或者方法被调用。

1. `watch`：这个函数可以用来观察和响应 Vue 实例上响应式数据的变化。当你需要在数据变化时执行异步或开销较大的操作时，这个方法特别有用。

const { watch } = Vue;

const state = reactive({ count: 0 });

watch(() => state.count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

2. `watchEffect`：这个函数会在其依赖项发生变化时自动重新执行。相比 `watch`，它会在第一次绑定时自动执行。

const { watchEffect } = Vue;

watchEffect(() => {
  console.log(`count is: ${state.count}`);
});

如果你需要监听一个方法（函数）是否被调用，你可以创建一个响应式的引用（ref）来标记该方法是否执行过，然后通过 `watch` 或 `watchEffect` 来监听这个标记的变化。

import { ref, watch } from 'vue';

const isCalled = ref(false);

function myMethod() {
  // 执行相关操作
  isCalled.value = true; // 将标记设置为 true 表示方法已调用
}

// 监听方法是否被调用
watch(isCalled, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    console.log('方法已被调用');
  }
});