vue的生命周期都干了什么

Vue.js 的生命周期钩子函数在组件的不同阶段执行不同的操作，包括 1、初始化组件、2、数据更新、3、销毁组件。 在整个生命周期中，Vue.js 提供了一系列的钩子函数，开发者可以在这些钩子函数中插入自己的代码，以便在特定的时刻执行特定的操作。接下来我们将详细介绍 Vue.js 各个生命周期钩子函数的作用和使用场景。

一、BEFORECREATE 和 CREATED

beforeCreate：组件实例刚刚被创建，此时组件的属性（如 data、methods 等）还没有被初始化。通常在这个钩子中不执行任何操作，因为此时还无法访问实例的属性。
created：组件实例已经创建完成，此时可以访问组件的属性和方法，但还没有挂载到 DOM 上。常用于在组件创建时进行数据请求或初始化。

new Vue({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 组件实例刚刚被创建');
  },
  created() {
    console.log('created: 组件实例已经创建完成，message = ' + this.message);
  }
});

二、BEFOREMOUNT 和 MOUNTED

beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。在此钩子中，组件还没有被挂载到 DOM 上。
mounted：组件被挂载到 DOM 上之后调用，常用于访问和操作 DOM 元素。

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeMount() {
    console.log('beforeMount: 在挂载开始之前被调用');
  },
  mounted() {
    console.log('mounted: 组件已挂载到 DOM 上');
    console.log(this.$el); // 访问 DOM 元素
  }
});

三、BEFOREUPDATE 和 UPDATED

beforeUpdate：在数据发生变化，更新之前调用。此时可以在数据更新之前执行一些操作。
updated：在数据更新之后调用，DOM 也会重新渲染。常用于在 DOM 更新之后执行一些操作。

new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据变化前的 count = ' + this.count);
  },
  updated() {
    console.log('updated: 数据变化后的 count = ' + this.count);
  }
});

四、BEFOREDESTROY 和 DESTROYED

beforeDestroy：在实例销毁之前调用，常用于清理计时器或取消订阅事件等操作。
destroyed：实例销毁之后调用，组件的所有事件监听器会被移除，所有子实例也会被销毁。

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeDestroy() {
    console.log('beforeDestroy: 组件实例即将被销毁');
  },
  destroyed() {
    console.log('destroyed: 组件实例已经被销毁');
  }
});

五、ACTIVATED 和 DEACTIVATED

这两个钩子函数仅在使用 Vue 的 keep-alive 组件时才会被调用。

activated：在 keep-alive 组件激活时调用。
deactivated：在 keep-alive 组件停用时调用。

Vue.component('my-component', {
  template: '<div>keep-alive 组件</div>',
  activated() {
    console.log('activated: 组件被激活');
  },
  deactivated() {
    console.log('deactivated: 组件被停用');
  }
});
new Vue({
  el: '#app',
  template: '<keep-alive><my-component></my-component></keep-alive>'
});

六、生命周期钩子函数的执行顺序

为了更好地理解 Vue.js 的生命周期，我们可以通过一个表格来展示钩子函数的执行顺序：

阶段	钩子函数
创建阶段	beforeCreate
	created
挂载阶段	beforeMount
	mounted
更新阶段	beforeUpdate
	updated
销毁阶段	beforeDestroy
	destroyed
keep-alive	activated
	deactivated

通过这个表格，我们可以更清楚地看到每个钩子函数在组件生命周期中的位置和作用。

七、实例说明与应用场景

数据初始化：在 created 钩子中进行 API 请求以初始化数据。因为此时组件已经创建完成，可以安全地访问组件的数据和方法。
DOM 操作：在 mounted 钩子中进行 DOM 操作，因为此时组件已经挂载到 DOM 上，可以获取和操作 DOM 元素。
性能优化：在 beforeUpdate 钩子中进行性能优化操作，例如在数据更新之前停止一些不必要的操作。
资源清理：在 beforeDestroy 钩子中进行资源清理，例如清除计时器、取消事件监听等。

总结来说，Vue.js 的生命周期钩子函数为开发者提供了在组件不同阶段执行操作的能力。通过合理地使用这些钩子函数，开发者可以更好地控制组件的行为，提高代码的可维护性和可读性。建议开发者在实际项目中，根据具体需求选择合适的生命周期钩子函数，以实现最佳的开发效果。