Vue-高级语法-自定义指令的生命周期

<template>
  <div class="app">
    <button @click="counter++">+1</button>
    <button @click="showTitle = false">隐藏</button>
    <h2 v-if="showTitle" class="title" v-mjy>当前计数：{{ counter }}</h2>
  </div>
</template>
​
<script setup>
import {ref} from "vue";
const counter = ref(0)
const showTitle = ref(true)
const vMjy = {
  created() {
    console.log("v-mjy应用的元素被created")
  },
  beforeMount() {
    console.log("v-mjy应用的元素beforeMount")
  },
  mounted() {
    console.log("v-mjy应用的元素被mounted")
  },
  beforeUpdate() {
    console.log("v-mjy应用的元素beforeUpdate")
  },
  updated() {
    console.log("v-mjy应用的元素updated")
  },
  beforeUnmount() {
    console.log("v-mjy应用的元素beforeUnmount")
  },
}
</script>

运行结果：

点击按钮+1运行结果

点击隐藏按钮的运行结果