如何理解vue2.x官網(wǎng)計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的

以以下代碼為示例,會(huì)發(fā)現(xiàn)除了計(jì)算屬性不變,methods會(huì)隨startTime的變更時(shí)重繪畫面會(huì)重新執(zhí)行,由于計(jì)算屬性是響應(yīng)式依賴進(jìn)行緩存的,而comData沒有依賴變動(dòng)的屬性,所以就算出現(xiàn)重繪,comData的值也不會(huì)變.

image.png

<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>

• 接上,在上述環(huán)境中如何讓comData也會(huì)隨著startTime變化而變化,再次品味一下計(jì)算屬性是響應(yīng)式依賴進(jìn)行緩存的,于是只需在comData里加入this.startTime即可(甚至都不需要做賦值|運(yùn)算等操作,只要引入后計(jì)算屬性就會(huì)把它作為響應(yīng)式依賴,當(dāng)this.startTime發(fā)生變化時(shí)就會(huì)返回新的值)

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

把最初代碼塊中的comData改為上述代碼后,會(huì)發(fā)現(xiàn)上述都隨startTime的變化而變化了,區(qū)別是:

1. 方法getData是由于template中有startTime,而startTime發(fā)生了變化引起重繪導(dǎo)致又重新執(zhí)行了getData方法;此時(shí)若注釋掉template中的 <div>{{ startTime }}</div>會(huì)發(fā)現(xiàn)依然會(huì)變化,這是因?yàn)橐坏┰?code>comData引入了依賴,而依賴發(fā)生變化都會(huì)引起重繪,而只要重繪都會(huì)引起重新執(zhí)行getData方法
2. 計(jì)算屬性變化是因?yàn)橐蕾嚨?code>startTime發(fā)生了變化所以會(huì)取新值