Vue2 调试小技巧：如何快速找到触发 computed 更新的属性

例子

<template>
  <div>
    {{ msg }}
    <button @click="f1">change s1/2/3</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      s1: "hello",
      s2: ",",
      s3: "world",
    };
  },
  computed: {
    msg() {
      return this.s1 + this.s2 + this.s3;
    },
  },
  methods: {
    f1() {
      // 模拟实际项目中对某个依赖被意外改动的情况
      let id = Math.floor(Math.random() * 3) + 1;
      this['s' + id] = '???';
    }
  },
};
</script>

在这个例子里，msg 有 3 个依赖，假设 msg 被意外触发了，在接触具体代码之前，怎么快速定位到是哪个依赖造成的 ？

方法

进入到 node_modules\vue\dist\vue.runtime.esm.js，在下图所示位置打断点，通过调用栈就可以看到哪个属性触发了 msg 的更新。