如何知道触发watch handler的上一个函数是哪一个?

点击 changeName 或者 changeAge,都会触发 watch user 的 handler,怎么知道具体是哪个函数触发了 watch user 的 handler 呢?

<template>
  <div>
    <button @click="changeName">change name</button>
    <button @click="changeAge">change age</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeName() {
      this.user.name = 'bar';
    },
    changeAge() {
      this.user.name = 20;
    }
  },
  data() {
    return {
      user: {
        name: "foo",
        age: 18
      }
    }
  },
  watch: {
    user: {
      deep: true,
      handler() {
        debugger;
        console.log('user change');
      }
    }
  }
}
</script>

浏览器 debug 时的 callstack,并没有上一次函数的调用信息。


这里的例子中是可以看到的,但是在项目中,只有flushCallbacks及之后的调用栈信息
image

一定要监听一个对象吗,可以单独监听属性

这是我简化出来的模型,项目中原来的逻辑就是监听了整个对象,这个对象在某次变化之后的数值不对,想知道到底是哪里的变动导致的。