vue3常见错误：Unhandled error during execution of watcher callback

错误描述

在watch或watchEffect回调函数中调用了已定义的方法，但是这个方法的定义在watch或watchEffect之后，浏览器控制台就会报错：Unhandled error during execution of watcher callback

比如下面的代码：

watch(
  () => name.value,
  () => {
    getInfo()
  }
);

const getInfo = ()=>{}

在watch中调用了getInfo方法，但是getInfo的定义在watch调用语句之后，就会报错

解决

将方法的定义放到watch调用语句之前，如下：

const getInfo = ()=>{}
watch(
  () => name.value,
  () => {
    getInfo()
  }
);