【vue3.0学习】生命周期

回顾vue2.0生命周期

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

vue3.0生命周期

• setup 创建实例前
• onBeforeMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpdated 更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted 卸载销毁后

验证代码

<template>
  <div id="app">
    <div class="coment">123</div>
  </div>
</template>
<script>
import { onBeforeMount, onMounted } from "vue";
export default {
  setup() {
    onBeforeMount(() => {
      console.log("DOM渲染前", document.querySelector(".coment"));
    });
    onMounted(() => {
      console.log("DOM渲染后1", document.querySelector(".coment"));
    });
    onMounted(() => {
      console.log("DOM渲染后2", document.querySelector(".coment"));
    });
  },
};
</script>

总结

组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同。