vue学习-计算属性和侦听器

计算属性

Vue知道计算属性aAddB依赖于a和b，在a或b发生变化的时候aAddB也会发生变化

即使是改b对象的属性（this.b.num = Math.random()），也能监听到，并调用函数重新生成计算属性

<template>
  <div>a: {{a}}</div>
  <div>b: {{b}}</div>
  <div>a+b: {{aAddB}}</div>
</template>

<script>
export default {
  data() {
    return { 
      a: 1,
      b: {num: 2},
      c: 0,
    }
  },
  computed: {
    aAddB() {
      console.log('运行aAddB计算属性的函数');
      return this.a + this.b.num;
    }
  },
  mounted() {
    setInterval(() => {
      this.b.num = Math.random();
    }, 1000);
  }
}
</script>

有意思的明明c和最后return的结果毫无关系，也能不停触发计算属性的更新函数

猜测可能是计算属性函数里所有写过的属性（abc），不管和最后return的结果有没有关系，它们setter都加了监听。当对它们进行赋值操作（this.c++），就会去重新执行计算属性函数。

<template>
  <div>a: {{a}}</div>
  <div>b: {{b}}</div>
  <div>a+b: {{aAddB}}</div>
</template>

<script>
export default {
  data() {
    return { 
      a: 1,
      b: {num: 2},
      c: 0,
    }
  },
  computed: {
    aAddB() {
      console.log('运行aAddB计算属性的函数');
      this.c;
      return this.a + this.b.num;
    }
  },
  mounted() {
    setInterval(() => {
      this.c++;
    }, 1000);
  }
}
</script>

---

计算属性缓存 vs 方法

 计算属性和方法最后的结果是相同的，不同的是计算属性是基于它们的响应依赖关系缓存的，计算属性只在依赖发生变化才会重新求值，而方法每当触发重新渲染时(在方法里面return new Date()并不能实现时钟,除非有其他操作触发重新渲染)，总会再次执行函数

总结：需要缓存和性能用计算属性，不需要缓存用方法

<template>
  <div>a: {{a}}</div>
  <div>b: {{b}}</div>
  <div>a+b: {{aAddB}}</div>
  <div>calcAB: {{calcAB()}}</div>
</template>

<script>
export default {
  data() {
    return { 
      a: 1,
      b: {num: 2},
      c: 0,
    }
  },
  computed: {
    aAddB() {
      console.log('运行aAddB计算属性的函数');
      // this.c;
      return this.a + this.b.num;
    }
  },
  methods: {
    calcAB() {
      console.log('运行calcAB函数');
      return this.a + this.b.num;
    }
  },
  mounted() {
    setInterval(() => {
      // this.c++;
      this.b.num = Math.random();
    }, 1000);
  },
}
</script>

---

 计算属性的 Setter

当对计算属性fullName进行赋值，set就会被调用。

暂时没发现啥用

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

---

侦听器

使用场景：当需要在数据变化时执行异步或开销较大的操作时 

不过没有计算属性那么强大，this.b.num = XXX并不能watch到，只有对b整个对象进行重新赋值才会被watch到

<template>
  <div>a: {{a}}</div>
  <div>b: {{b}}</div>
  <div>a+b: {{aAddB}}</div>
  <div>calcAB: {{calcAB()}}</div>
</template>

<script>
export default {
  data() {
    return { 
      a: 1,
      b: {num: 2},
      c: 0,
    }
  },
  computed: {
    aAddB() {
      console.log('运行aAddB计算属性的函数');
      // this.c;
      return this.a + this.b.num;
    }
  },
  methods: {
    calcAB() {
      console.log('运行calcAB函数');
      return this.a + this.b.num;
    }
  },
  watch: {
    b(newValue, oldValue) {
      console.log(newValue, oldValue);
    }
  },
  mounted() {
    setInterval(() => {
      // this.c++;
      // this.b.num = Math.random(); // 无法被watch到
      this.b = {
        num:  Math.random(), // 可以被watch到
      };
    }, 1000);
  },
}
</script>