深究vue中computed顺序、watch顺序、响应次数

---

前言

深究vue中computed顺序、watch顺序、响应次数

---

深究步骤

1.代码

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

2.输出结果

页面渲染完成的输出：

点击按钮的输出：

跟你的预期一致么？如果不一致，为什么？

3.分析过程

• vue是如何知道computed内的响应式变量发生了变化？答：第一次调用时收集依赖

• a 是 data，b watch 了 a，c watch 了 a 和 b，问 a 变化时，c 执行多少次？答：1次

• 同一个函数内修改了 data 的两个值，watch 中的调用顺序是否与修改 data 的值的顺序有关？答：无关，只与 watch 的定义顺序有关

• 一个函数 f1 内修改 data 变量 a，执行完该函数前，watch a 的函数是否会在 f1 执行完毕之前执行？答：不会，会先缓存待执行的 watch 函数，之后再统一调用这些 watch 方法

• 初始化加载页面时，computed 是否会执行？答：不会，调用时才会执行（观察 computed 的 d 从未执行过。而打印computed b，是因为 watch 了 b）。

• 变量发生变化时，watch 先执行？还是 computed 先执行？答：computed（有的话）

• computed 的打印顺序是否与定义顺序有关？答：无关，只与变化顺序有关

• 若在 chrome DevTools 中 vue 插件查看此组件的数据，则会执行一次 computed d
  
  

• 何时会执行 computed ？答：被调用时。分几种情况：被 template 调用时、被实际执行的代码调用时、被 watch 时

• data 跑完才跑 watch

总结

做学问，一定要勤于思考，透过现象看本质，才能有进步