vue3 组件

学习随笔（Vue3 组件）

• 该随笔是根据b站小满zs的Vue3 + vite + Ts + pinia + 实战 + 源码 +electron的视频学习写的，Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

1. vue3组件引用不需要像vue2一样，需要写components标签，可以直接使用，例：

<template>
  <div></div>
  <A></A>
</template>

import A from "./components/A.vue";

2. Vue3中的组件生命周期
   首先复习一下vue2中的生命周期：创建前/后，载入前/后，更新前/后，销毁前/后；也就是beforeCreate/created,beforeMount/mounted,beforeUpdate/updated,beforeDestory/destoryed。
   复习完Vue2的生命周期后，我们来学习一下Vue3的生命周期，在vue3中setup的语法糖模式里面是没有beforeCreate/created这个生命周期的，是直接使用setup来代替的。所以在setup语法糖模式里，只有onBeforeMount/onMounted,onBeforeUpdate/onUpdated,onBeforeUnmount/onUnmounted。

import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue';

// 这里假设在div标签上使用了ref标记，<div ref="div">圆子同学</div>
// 限制为元素类型
const div = ref<HTMLDivElement>();

// 载入前
onBeforeMount(() => {
  // 这里是读不到DOM的
  console.log('挂载前==========>');
});

// 载入后
onMounted(() => {
  // 这里就可以读到DOM了
  console.log('挂载后==========>');
});

// 更新前
onBeforeUpdate(() => {
  console.log('更新前==========>', div.value?.innerText);
});

// 更新后
onUpdated(() => {
  console.log('更新后==========>', div.value?.innerText);
});

// 销毁
onBeforeUnmount(() => {
  console.log('销毁前==========>');
});

// 销毁后
onUnmounted(() => {
  console.log('销毁后==========>');
});