vue的生命周期

最主要

export default {
  // ...
  beforeDestroy() {
    // 在实例销毁前执行一些操作
  },
  destroyed() {
    // 在实例销毁后执行一些操作
  },
  // ...
}

beforeCreate: {
  // Vue 实例创建之前执行的代码
  // 在此阶段，Vue 实例的选项和数据尚未初始化，无法访问到 data、computed、methods 等属性

  // 示例代码：
  console.log("beforeCreate 阶段：Vue 实例被创建之前");
},

created: {
  // Vue 实例创建完成后执行的代码
  // 在此阶段，Vue 实例已经创建，可以访问到 data、computed、methods 等属性，但尚未挂载到 DOM 上

  // 示例代码：
  console.log("created 阶段：Vue 实例已经创建，但尚未挂载到 DOM 上");
},

beforeMount: {
  // Vue 实例挂载之前执行的代码
  // 在此阶段，Vue 实例已经编译模板，但尚未挂载到 DOM 上

  // 示例代码：
  console.log("beforeMount 阶段：Vue 实例即将挂载到 DOM 上");
},

mounted: {
  // Vue 实例挂载完成后执行的代码
  // 在此阶段，Vue 实例已经挂载到 DOM 上，可以进行 DOM 操作

  // 示例代码：
  console.log("mounted 阶段：Vue 实例已经挂载到 DOM 上");
},

beforeUpdate: {
  // Vue 实例更新之前执行的代码
  // 在此阶段，数据即将更新，可以进行状态更新操作，但尽量避免直接修改数据

  // 示例代码：
  console.log("beforeUpdate 阶段：Vue 实例即将更新数据");
},

updated: {
  // Vue 实例更新完成后执行的代码
  // 在此阶段，数据已经更新完成，DOM 也已重新渲染

  // 示例代码：
  console.log("updated 阶段：Vue 实例已经更新数据");
},

beforeDestroy: {
  // Vue 实例销毁之前执行的代码
  // 在此阶段，实例仍然完全可用

  // 示例代码：
  console.log("beforeDestroy 阶段：Vue 实例即将销毁");
},

destroyed: {
  // Vue 实例销毁后执行的代码
  // 在此阶段，实例已经销毁，所有的事件监听和子实例都被移除

  // 示例代码：
  console.log("destroyed 阶段：Vue 实例已经销毁");
}