vue2.x computed vs methods

如何理解vue2.x官网计算属性是基于它们的响应式依赖进行缓存的

以以下代码为示例,会发现除了计算属性不变,methods会随startTime的变更时重绘画面会重新执行,由于计算属性是响应式依赖进行缓存的,而comData没有依赖变动的属性,所以就算出现重绘,comData的值也不会变.

<template>
  <div id="app">
    <div>{{ startTime }}</div>
    <div>
      {{ comData }}
    </div>
    <div>
      {{ getData("method") }}
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      startTime: 0,
    };
  },
  computed: {
    comData() {
      return new Date().getSeconds() + "from computed";
    },
  },
  mounted() {
    setInterval(() => {
      this.startTime++;
    }, 1000);
  },
  updated() {
    window.console.log("更新了");
  },

  methods: {
    getData() {
      return new Date().getSeconds() + "from methods";
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• 接上,在上述环境中如何让comData也会随着startTime变化而变化,再次品味一下计算属性是响应式依赖进行缓存的,于是只需在comData里加入this.startTime即可(甚至都不需要做赋值|运算等操作,只要引入后计算属性就会把它作为响应式依赖,当this.startTime发生变化时就会返回新的值)

    comData() {
      // eslint-disable-next-line no-unused-expressions
      this.startTime;
      return new Date().getSeconds() + "from computed";
    },

把最初代码块中的comData改为上述代码后,会发现上述都随startTime的变化而变化了,区别是:

1. 方法getData是由于template中有startTime,而startTime发生了变化引起重绘导致又重新执行了getData方法;此时若注释掉template中的 <div>{{ startTime }}</div>会发现依然会变化,这是因为一旦在comData引入了依赖,而依赖发生变化都会引起重绘,而只要重绘都会引起重新执行getData方法
2. 计算属性变化是因为依赖的startTime发生了变化所以会取新值