Vue3自定义指令生命周期(2)
发表于:2024-06-23 12:00:51浏览:166次
指令的生命周期
一个指令定义的对象,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>
感谢大家观看,我们下期再见