Vue3 生命周期 - 2024最新版前端秋招面试短期突击面试题【100道】

Vue3 生命周期 - 2024最新版前端秋招面试短期突击面试题【100道】 🔄

在Vue.js中，生命周期钩子是组件从创建到销毁过程中的一系列事件。理解Vue的生命周期对于掌握组件的行为和调试至关重要。Vue 3引入了Composition API，改变了生命周期函数的使用方式。以下是关于Vue 2和Vue 3生命周期的详细解释。

Vue 2 生命周期钩子 🌱

在Vue 2中，组件生命周期包括多个钩子函数，主要有：

beforeCreate：实例刚被创建，数据还未初始化。
created：实例创建完成，数据已初始化。
beforeMount：模板渲染前，DOM还未挂载。
mounted：实例已挂载，DOM已渲染。
beforeUpdate：数据更新前。
updated：数据更新后，DOM已更新。
beforeDestroy：实例销毁前。
destroyed：实例已销毁。

示例代码（Vue 2）

new Vue({
  el: '#app',
  data() {
    return {
      msg: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log("beforeCreate,挂载了vue实例的方法，但是data没有挂载", this.msg);
  },
  created() {
    console.log("created,挂载了data", this.msg);
  },
  beforeMount() {
    console.log("data没有渲染到了页面", document.getElementById("app").innerHTML);
  },
  mounted() {
    console.log("mounted data渲染到了页面", document.getElementById("app").innerHTML);
  },
  beforeUpdate() {
    console.log("beforeUpdate数据更改导致DOM更改之前", document.getElementById("app").innerHTML);
  },
  updated() {
    console.log("updated数据更改导致DOM更改之后", document.getElementById("app").innerHTML);
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  }
});

Vue 3 生命周期钩子 🌳

在Vue 3中，使用Composition API，生命周期钩子的使用方式发生了变化。以下是与Vue 2对应的生命周期钩子：

onBeforeMount：组件渲染前。
onMounted：组件已挂载。
onBeforeUpdate：组件更新前。
onUpdated：组件更新后。
onBeforeUnmount：组件卸载前。
onUnmounted：组件已卸载。

示例代码（Vue 3）

const { createApp, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } = Vue;

const app = createApp({
  setup() {
    const msg = ref("你好11111111111");

    console.log("1");

    onBeforeMount(() => {
      console.log("onBeforeMount data没有渲染到了页面", document.getElementById("app").innerHTML);
    });

    onMounted(() => {
      console.log("onMounted data渲染到了页面", document.getElementById("app").innerHTML);
      setTimeout(() => {
        msg.value = "hello";
      }, 1000);
    });

    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });

    onUpdated(() => {
      console.log("onUpdated");
    });

    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
    });

    onUnmounted(() => {
      console.log("onUnmounted");
    });

    return { msg };
  }
});

app.mount('#app');