vue2.x computed vs methods

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

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

image.png

• 接上,在上述环境中如何让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中的
   {{ startTime }}
   会发现依然会变化,这是因为一旦在comData引入了依赖,而依赖发生变化都会引起重绘,而只要重绘都会引起重新执行getData方法
2. 计算属性变化是因为依赖的startTime发生了变化所以会取新值