vue3.0——生命周期、VUE3插件

99 阅读1分钟

如何在setup中调用生命周期钩子

VUE3.0向下兼容了VUE2
我觉得beforeCreate和created 更多的是被setup()代替了

image.png

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import {
  defineAsyncComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  onActivated,
  onDeactivated
} from "vue"; //
const Header = defineAsyncComponent(() => import("@/components/Header.vue")); //组件懒加载
export default {
  setup() {
    onBeforeMount(() => {
      console.log("组件挂载到页面=========>onBeforeMount");
    });
    onMounted(() => {
      console.log("组件挂载页面完成=========>onMounted");
    });
    onBeforeUpdate(() => {
      console.log("组件更新页面之前=========>onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("组件更新页面完成=========>onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("组件卸载之前=========>onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("组件卸载之后=========>onUnmounted");
    });
  },
  components: {
    Header,
  },
};
</script>

官网详情如下 : v3.cn.vuejs.org/guide/compo…

image.png

官网地址
v3.cn.vuejs.org/api/options…