Vue3自定义指令生命周期(2)

指令的生命周期

一个指令定义的对象，Vue提供了如下的几个钩子函数

• created：在绑定元素的attribute或事件监听器被应用之前调用；
• beforeMounted：当指令第一次绑定到元素并且在挂载父组件之前调用；
• mounted：在绑定元素的父组件被挂载之后调用；
• beforeUpdate：在更新包含组件的VNode之前调用；
• update：在包含组件的VNode以及其子组件的VNode更新后调用；
• beforeUnmount：在卸载绑定元素的父组件之前调用；
• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

示例代码

<template>
  <div class="app">
    <button @click="counter++">+1</button>
    <button @click="showTitle = false">隐藏</button>
    <h2 v-if="showTitle" class="title" v-why>当前计数: {{ counter }}</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';


const counter = ref(0)
const showTitle = ref(true)

const vWhy = {
  created() {
    console.log("created")
  },
  beforeMount() {
    console.log("beforeMount")
  },
  mounted() {
    console.log("mounted")
  },
  beforeUpdate() {
    console.log("beforeUpdate")
  },
  updated() {
    console.log("updated")
  },
  beforeUnmount() {
    console.log("beforeUnmount")
  },
  unmounted() {
    console.log("unmounted")
  }
}

</script>

<style scoped>

</style>

感谢大家观看,我们下期再见