博客

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

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

选项式 API		Hook inside setup
beforeCreate	Not needed*
created			Not needed*
beforeMount		onBeforeMount
mounted			onMounted
beforeUpdate	onBeforeUpdate
updated			onUpdated
beforeUnmount	onBeforeUnmount
unmounted		onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated		onActivated
deactivated		onDeactivated

<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>

官网如下
https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

官网地址
https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html

VScode 关于VUE3.0插件

Vue Language Features (Volar)