07 vue3之组件及生命周期

news2024/12/22 17:01:48

组件基础

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

每一个组件都可以复用

组件的生命周期

简单来说就是一个组件从创建到销毁的过程成为生命周期

在我们使用Vue3 组合式API 是没有 beforeCreate 和 created 这两个生命周期的

onBeforeMount()

在组件DOM实际渲染安装之前调用。在这一步中，根元素还不存在。

onMounted()

在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问

onBeforeUpdate()

数据更新时调用，发生在虚拟 DOM 打补丁之前。

onUpdated()

DOM更新后，updated的方法即会调用。

onBeforeUnmount()

在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。

onUnmounted()

卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

选项式 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

代码示例

父组件

<template>
  <div ref="div">原始值</div>
  <A v-if="flag"></A>
  <button @click="flag = !flag">创建和销毁</button>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import A from "./components/seven.vue"; //vue3.0中引入组件的方式,无需再注册了引入就可使用

let flag = ref<boolean>(true);
</script>

<style lang="sass" scoped></style>

子组件A

<template>
  <div>我是组件</div>
  <div ref="div">{{ str }}</div>
  <button @click="change">修改</button>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onRenderTracked,
  onRenderTriggered,
  getCurrentInstance,
} from "vue";
// vue2中Beforecreate created ,在vue3中是没有的 用steup语法糖代替了
// onBeforeMount创建之前是拿不到dom元素，onMounted创建完成能拿到dom元素
// onBeforeUpdate获取更新之前的dom,onUpdated获取更新之后的dom
let instance = getCurrentInstance(); // H获取VUE实例
console.log(instance);

let str = ref<string>("cookie");
let div = ref<HTMLDivElement>(); // 通过ref获取dom元素 ref="div" 一定要与let div这个变量名保持一致
const change = () => {
  str.value = "被修改了";
};
onBeforeMount(() => {
  console.log("创建之前------", div.value); // undefined
});
onMounted(() => {
  console.log("创建完成------", div.value?.innerText); // cookie
});
onBeforeUpdate(() => {
  console.log("更新之前------", div.value?.innerText); // cookie
});
onUpdated(() => {
  console.log("更新完成------", div.value?.innerText); // 被修改了
});
onBeforeUnmount(() => {
  console.log("卸载之前------", div.value?.innerText); // 被修改了
});
onUnmounted(() => {
  console.log("卸载完成------", div.value?.innerText); // undefined
});
</script>

<style lang="sass" scoped></style>