Vue的生命周期

目录

一、Vue2 生命周期及发送请求位置分析

二、Vue3 生命周期及与 Vue2 的对比

---

以下是对视频内容的汇总，并结合了 Vue3 的相关内容。

一、Vue2 生命周期及发送请求位置分析

1. Vue2 生命周期：Vue2 系统自带八个生命周期，分别是 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。如果使用系统自带的 keep 组件，会额外新增两个生命周期。
2. 发送请求的位置：
   • 在 Vue2 中，发送请求在 created 和 mounted 生命周期中没有本质区别，因为在这两个生命周期中，请求都是异步执行的，最终都会在同步代码执行完后才拿到数据。如果请求被封装到一个方法中，在 beforeCreate 中无法调用这个方法，因为此时还无法获取到组件实例中的方法。而在 created 生命周期中可以拿到组件实例中的方法和数据。
   • 如果父组件引入了子组件，生命周期执行顺序是先执行父组件的前三个生命周期，然后执行子组件的前四个生命周期，最后执行父组件的 mounted 生命周期。如果子组件也有请求，并且希望优先加载子组件的数据，那么父组件的请求可以放在 mounted 生命周期中。如果父组件和子组件没有依赖关系，那么请求放在哪个生命周期都可以。

二、Vue3 生命周期及与 Vue2 的对比

1. Vue3 生命周期：Vue3 的生命周期与 Vue2 有所不同，主要包括 setup、beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。
2. 发送请求的位置：在 Vue3 中，发送请求的位置与 Vue2 类似。由于 Vue3 中的 setup 函数在组件创建之前执行，所以不能在 setup 函数中发送请求来获取依赖子组件的数据。在 created 生命周期中，可以获取到组件实例中的数据和方法，所以可以在这里发送请求。同样，在 mounted 生命周期中也可以发送请求，但是要注意如果有多个子组件，并且希望优先加载子组件的数据，可能需要将请求放在 mounted 生命周期中。

<template>
  <div>Hello Vue3!</div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  setup() {
    // setup 函数不能发送请求来获取依赖子组件的数据
    return {};
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    axios.get('https://api.example.com/data')
     .then(response => {
        console.log(response.data);
      });
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    axios.get('https://api.example.com/data')
     .then(response => {
        console.log(response.data);
      });
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
};
</script>

在这个示例中，请求可以在 created 和 mounted 生命周期中发送。具体放在哪个生命周期中，取决于项目的需求和业务情况。如果没有父子组件的依赖关系，放在哪个生命周期都可以。如果有父子组件的依赖关系，并且希望优先加载子组件的数据，可以将请求放在 mounted 生命周期中。