Vue computed 与 生命周期的关系

<template>
  <div>
    <el-button @click='count++'>
      {{ count }}
    </el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 1
    };
  },
  computed: {
    formatCount () {
      /**
       * computed 里面执行打印 console.log(this.count);
       * 只会在以下两种情况调用
       * 1、程序第一次调用 formatCount 时
       * 2、count 这个依赖改变后，程序第一次调用 formatCount 时
       * 因为 computed 执行后会被程序缓存起来，除非依赖改变了才会重新执行
       */
      console.log('------ computed -------');
      console.log(this.count);
      return this.count * 10;
    }
  },
  destroyed () {
    /**
     * 执行的 this.formatCount 是 beforeUpdate/created 生命周期遗留下来的缓存
     * 所以不会打印 this.count
     */
    console.log('------ destroyed -------');
    console.log(this.formatCount);
  },
  beforeDestroy () {
    /**
     * 执行的 this.formatCount 是 beforeUpdate/created 生命周期遗留下来的缓存
     * 所以不会打印 this.count
     */
    console.log('------ beforeDestroy -------');
    console.log(this.formatCount);
  },
  updated () {
    /**
     * 执行的 this.formatCount 是 beforeUpdate 生命周期遗留下来的缓存
     */
    console.log('------ updated -------');
    console.log(this.formatCount);
  },
  beforeUpdate () {
    /**
     * 改变了 this.count
     * 因此程序会重新计算 this.formatCount
     * 因此会打印 this.count
     */
    console.log('------ beforeUpdate -------');
    console.log(this.formatCount);
  },
  mounted () {
    console.log('------ mounted -------');
    console.log(this.formatCount);
  },
  beforeMount () {
    console.log('------ beforeMount -------');
    console.log(this.formatCount);
  },
  created () {
    /**
     * 因为 created 生命周期是能访问到 $data 的
     * 所以 this.formatCount 也是能访问到的
     * 即程序还开始计算 formatCount，会打印 this.count
     * 所以后面的 beforeMount、mounted 生命周期执行的是 created 的缓存
     */
    console.log('------ created -------');
    console.log(this.formatCount);
  },
  beforeCreate () {
    /**
     * 因为 beforeCreate 生命周期是访问不到 $data 的
     * 所以 this.formatCount 也是访问不到的
     * 即程序还没计算 formatCount，不会打印 this.count
     */
    console.log('------ beforeCreate -------');
    console.log(this.formatCount);
  }
};
</script>

2、初始化阶段

image.png

3、更新化阶段

image.png

4、卸载化阶段

image.png

5、结论
computed 中定义的函数里面的代码只有在以下两种情况下调用时执行

• a、初始化后（beforeCreatedn生命周期后）第一次调用时
• b、所需的依赖变化后的第一次调用时