快捷導(dǎo)航

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

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

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

先看代碼

<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ù)期一致么？如果不一致，為什么？

分析過程

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