快捷導(dǎo)航

vue中computed順序、watch順序、響應(yīng)次數(shù)使用

更新時(shí)間：2024年08月07日 09:35:42 作者：秦時(shí)明月之安康

這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

先看代碼

<template>
  <div class="hello">
    <button style="font-size: 40px;" @click="change">改變值</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    console.log("data");
    return {
      a: 1,
      a2: 1
    };
  },
  watch: {
    a() {
      console.log("watch a");
    },
    b() {
      console.log("watch b");
    },
    c() {
      console.log("watch c");
    },
    a2() {
      console.log("watch a2");
    }
  },
  computed: {
    b() {
      console.log("computed b");
      return this.a + 1;
    },
    c() {
      console.log("computed c");
      return this.b + this.a;
    },
    d() {
      console.log("computed d");
      return this.a + 1;
    }
  },
  methods: {
    change() {
      console.log("-");
      this.a2 += 1;
      console.log("--");
      this.a += 1;
      console.log(this.c);
      console.log("---");
    }
  }
};
</script>

<style scoped lang="less"></style>

輸出結(jié)果

頁(yè)面渲染完成的輸出

點(diǎn)擊按鈕的輸出

跟你的預(yù)期一致么？如果不一致，為什么？

分析過(guò)程

vue是如何知道computed內(nèi)的響應(yīng)式變量發(fā)生了變化？答：第一次調(diào)用時(shí)收集依賴
a 是 data，b watch 了 a，c watch 了 a 和 b，問(wèn) a 變化時(shí)，c 執(zhí)行多少次？答：1次
同一個(gè)函數(shù)內(nèi)修改了 data 的兩個(gè)值，watch 中的調(diào)用順序是否與修改 data 的值的順序有關(guān)？答：無(wú)關(guān)，只與 watch 的定義順序有關(guān)
一個(gè)函數(shù) f1 內(nèi)修改 data 變量 a，執(zhí)行完該函數(shù)前，watch a 的函數(shù)是否會(huì)在 f1 執(zhí)行完畢之前執(zhí)行？答：不會(huì)，會(huì)先緩存待執(zhí)行的 watch 函數(shù)，之后再統(tǒng)一調(diào)用這些 watch 方法
初始化加載頁(yè)面時(shí)，computed 是否會(huì)執(zhí)行？答：不會(huì)，調(diào)用時(shí)才會(huì)執(zhí)行（觀察 computed 的 d 從未執(zhí)行過(guò)。而打印computed b，是因?yàn)?watch 了 b）。
變量發(fā)生變化時(shí)，watch 先執(zhí)行？還是 computed 先執(zhí)行？答：computed（有的話）
computed 的打印順序是否與定義順序有關(guān)？答：無(wú)關(guān)，只與變化順序有關(guān)
若在 chrome DevTools 中 vue 插件查看此組件的數(shù)據(jù)，則會(huì)執(zhí)行一次 computed d