Vue3 组件及其生命周期

Vue3 组件及其生命周期

每一个 .vue 都可以充当组件来使用
每一个组件都可以复用

组件使用示例

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
// vue3 setup 语法糖组件无需声明式注册
// components: {
     
//   HelloWorld
// }
</script>

<template>
  <div>
    <HelloWorld msg="Hello,Vue3"/>
  </div>
</template>

组件的生命周期

vue2 组件的生命周期

Vue3 钩子函数

    beforeCreate -> 使用 setup()
    created -> 使用 setup()
    beforeMount -> onBeforeMount
    mounted -> onMounted
    beforeUpdate -> onBeforeUpdate
    updated -> onUpdated
    beforeDestroy -> onBeforeUnmount
    destroyed -> onUnmounted
    errorCaptured -> onErrorCaptured

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import {
     r