面试题：Vue 2 到 Vue 3 迁移中，如何处理生命周期钩子函数的变化？

生命周期钩子函数的改变

命名变化：
- 在 Vue 2 中，生命周期钩子函数有 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 等。
- 在 Vue 3 中，beforeDestroy 改名为 beforeUnmount，destroyed 改名为 unmounted。这是因为 Vue 3 更强调组件的挂载和卸载概念，而不是销毁。
组合式 API 中的使用：
- 在 Vue 2 中，生命周期钩子函数是在组件选项对象中定义的，例如：

export default {
  created() {
    console.log('组件创建完成');
  }
}

在 Vue 3 的组合式 API 中，需要使用 setup 函数内通过相应的函数来使用生命周期钩子。例如：

import { onMounted, onBeforeUnmount } from 'vue';
export default {
  setup() {
    onMounted(() => {
      console.log('组件挂载完成');
    });
    onBeforeUnmount(() => {
      console.log('组件即将卸载');
    });
    return {};
  }
}

实际项目中的代码调整

选项式 API 项目迁移：
- 如果项目仍使用选项式 API（类似 Vue 2 的写法），仅需将 beforeDestroy 和 destroyed 改为 beforeUnmount 和 unmounted 即可。例如：

// Vue 2 代码
export default {
  beforeDestroy() {
    console.log('组件即将销毁');
  }
}
// Vue 3 代码
export default {
  beforeUnmount() {
    console.log('组件即将卸载');
  }
}

转换为组合式 API：
- 创建阶段：
  - 在 Vue 2 中 created 钩子，在 Vue 3 组合式 API 中使用 onBeforeMount 和 onMounted。例如，在 Vue 2 中可能在 created 中获取数据：

export default {
  data() {
    return {
      dataList: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟获取数据
      this.dataList = [1, 2, 3];
    }
  }
}

 - 在 Vue 3 组合式 API 中：

import { ref, onMounted } from 'vue';
export default {
  setup() {
    const dataList = ref([]);
    const fetchData = () => {
      // 模拟获取数据
      dataList.value = [1, 2, 3];
    };
    onMounted(() => {
      fetchData();
    });
    return {
      dataList
    };
  }
}

更新阶段：
- Vue 2 中的 beforeUpdate 和 updated，在 Vue 3 组合式 API 中对应 onBeforeUpdate 和 onUpdated。例如，在 Vue 2 中 updated 可能用于重新计算某些依赖数据：

export default {
  data() {
    return {
      number: 0
    };
  },
  updated() {
    console.log('数据更新后重新计算');
  }
}

 - 在 Vue 3 组合式 API 中：

import { ref, onUpdated } from 'vue';
export default {
  setup() {
    const number = ref(0);
    onUpdated(() => {
      console.log('数据更新后重新计算');
    });
    return {
      number
    };
  }
}

卸载阶段：
- 对于 Vue 2 中的 destroyed，在 Vue 3 组合式 API 中使用 onUnmounted。例如，在 Vue 2 中 destroyed 可能用于清理定时器：

export default {
  data() {
    return {
      timer: null
    };
  },
  created() {
    this.timer = setInterval(() => {
      console.log('定时器运行');
    }, 1000);
  },
  destroyed() {
    clearInterval(this.timer);
  }
}

 - 在 Vue 3 组合式 API 中：

import { onUnmounted } from 'vue';
export default {
  setup() {
    let timer = setInterval(() => {
      console.log('定时器运行');
    }, 1000);
    onUnmounted(() => {
      clearInterval(timer);
    });
    return {};
  }
}

星途面试题库

面试题：Vue 2 到 Vue 3 迁移中，如何处理生命周期钩子函数的变化？

知识考点

面试题答案

生命周期钩子函数的改变

实际项目中的代码调整