一文详解Vue.js与TypeScript的生命周期

vue create my-project
# 选择TypeScript

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  // beforeCreate
  beforeCreate() {
    console.log('Component is about to be created...');
  }

  // created
  created() {
    console.log('Component created');
  }

  // beforeMount
  beforeMount() {
    console.log('Component is about to be mounted...');
  }

  // mounted
  mounted() {
    console.log('Component mounted');
  }

  // beforeUpdate
  beforeUpdate() {
    console.log('Component is about to update...');
  }

  // updated
  updated() {
    console.log('Component updated');
  }

  // beforeDestroy
  beforeDestroy() {
    console.log('Component is about to be destroyed...');
  }

  // destroyed
  destroyed() {
    console.log('Component destroyed');
  }
}
</script>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted } from 'vue';

export default defineComponent({
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component mounted');
    });

    // unmounted
    onUnmounted(() => {
      console.log('Component unmounted');
    });

    return {
      // reactive state and methods
    };
  }
});
</script>

created() {
  this.fetchData();
}

methods: {
  async fetchData() {
    try {
      const response = await axios.get('/api/data');
      this.data = response.data;
    } catch (error) {
      console.error('Error fetching data', error);
    }
  }
}

mounted() {
  window.addEventListener('resize', this.handleResize);
}

beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

methods: {
  handleResize() {
    // Handle the resize event
  }
}

data() {
  return {
    timer: null
  };
}



created() {
  this.timer = setInterval(this.tick, 1000);
}

beforeDestroy() {
  clearInterval(this.timer);
}

methods: {
  tick() {
    // Do something on a timer
  }
}