Home Vue Vue3

# 1.Composition API -> beforeCreate & created Not needed

  1. 在 Vue3 中，beforeCreate 和 created 可以照常在 Options API 使用。
  2. 但在 setup 也就是 Composition API 中 已经不存在了。
  3. 但我们要在 beforeCreate 或 created 里做一系列操作的话，除了在 setup 外写，还可直接在 setup 中执行，甚至执行更早。
  4. 因为在源码里，setup 的执行顺序比所有生命周期都还要早，下面例子中也能看出来！
  5. 其余的生命周期与原来基本一致，下面我演示几个～

# 2.beforeCreate、created、setup、onBeforeMount、 onMounted 的执行顺序

直接在 App.vue 组件演示

vue
<template>
  <div></div>
</template>
<script>
import { onBeforeMount, onMounted } from "vue";
export default {
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  setup() {
    console.log(
      "setup无论在 Options API 还是 Composition API ,都比所有生命周期都先执行!"
    );
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
    });
    return {};
  },
};
</script>
<style scoped></style>
参考结果：setup  ->  beforeCreate ->  created ->   onBeforeMount ->  onMounted


setup


# 3.onBeforeUpdate 和 onUpdated


vue
// App.vue 
<template>
  <div>
    <h3>{{ info }}</h3>
    <button @click="changeInfo">changeInfo</button>
  </div>
</template>
<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue";
export default {
  setup() {
    console.log("setup");
    const info = ref({ name: "Neko", age: 16 });
    const changeInfo = () => {
      info.value.age++;
    };
    onBeforeMount(() => {
      console.log("onBeforeUnmount");
    });
    onMounted(() => {
      console.log("onMounted");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
      console.log("---------");
    });
    return {
      info,
      changeInfo,
    };
  },
};
</script>
<style scoped></style>
参考结果：


onBeforeUpdate-onUpdated


# 4. 可注册多个生命周期


vue
// App.vue
<template>
  <div>
    <h3>{{ info }}</h3>
    <button @click="changeInfo">changeInfo</button>
  </div>
</template>
<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue";
export default {
  setup() {
    console.log("setup");
    const info = ref({ name: "Neko", age: 16 });
    const changeInfo = () => {
      info.value.age++;
    };
    onBeforeMount(() => {
      console.log("onBeforeMount1");
    });
    onBeforeMount(() => {
      console.log("onBeforeMount2");
    });
    onMounted(() => {
      console.log("onMounted1");
    });
    onMounted(() => {
      console.log("onMounted2");
      console.log("------------");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate1");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate2");
    });
    onUpdated(() => {
      console.log("onUpdated1");
    });
    onUpdated(() => {
      console.log("onUpdated2");
      console.log("------------");
    });
    return {
      info,
      changeInfo,
    };
  },
};
</script>
<style scoped></style>
life-cycle_reuse


# 5.Vue3 Options API&Composition API 生命周期


Vue3 中对 Vue2 的写法是完全兼容的，所以你也可以在 setup 之外写 Vue2 的生命周期函数。






Options API
Composition API






beforeCreate
Not needed*




created
Not needed*




beforeMount
onBeforeMount




mounted
onMounted




beforeUpdate
onBeforeUpdate




updated
onUpdated




beforeUnmount
onBeforeUnmount




unmounted
onUnmounted




activated
onActivated




deactivated
onDeactivated




errorCaptured
onErrorCaptured






<style>thead{color: coral;}tbody{color: chocolate;}</style>