Function default

Example

代码改造前

<template>
  <Loading @finish="_onLoadingFinish" />
  <Animation @end="_onAnimationEnd" />
</template>
<script>
export default {
  data: () => ({
    loadingDone: true,
    animationDone: true,
    loginDone: true
  }),
  watch: {
    // 每增加一个事件，就要增加一个 watch，还要增加一个 if 条件
    loadingDone(val) {
      if (val && this.animationDone && this.loginDone) {
        this._allDone();
      }
    },
    animationDone(val) {
      if (val && this.loadingDone && this.loginDone) {
        this._allDone();
      }
    },
    loginDone(val) {
      if (val && this.loadingDone && this.animationDone) {
        this._allDone();
      }
    }
  },
  mounted() {
    api.postLogin().then(res => {
      this.loginDone = true;
    });
  },
  methods: {
    _onLoadingFinish() {
      this.loadingDone = true;
    },
    _onAnimationEnd() {
      this.animationDone = true;
    },
    _allDone() {
      console.log('go next');
    }
  }
};
</script>
Copy

代码改造后，少了 20 行代码

<template>
  <Loading @finish="_onLoadingFinish" />
  <Animation @end="_onAnimationEnd" />
</template>
<script>
import createPromise from '@/dlf/un/createPromise';
const loadingProm = createPromise();
const animationProm = createPromise();
export default {
  mounted() {
    Promise.all([
      api.postLogin(),
      loadingProm.done,
      animationProm.done
    ]).then(() => {
        this._allDone();
    });
  },
  methods: {
    _onLoadingFinish() {
      loadingProm.resolve();
    },
    _onAnimationEnd() {
      animationProm.resolve();
    },
    _allDone() {
      console.log('go next');
    }
  }
};
</script>
Copy