指令的生命周期
一个指令定义的对象，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>感谢大家观看,我们下期再见
我热爱, 写得很实在。你的博客 就是 最好的例子。很出色。
I've learn several good stuff here. Certainly price bookmarking for revisiting. I surprise how so much effort you put to make such a great informative website.
It's not my first time to pay a visit this web page, i am visiting this website dailly and get good facts from here every day.
Hello, i think that i saw you visited my site so i got here to go back the want?.I'm trying to find things to improve my web site!I suppose its adequate to use a few of your concepts!!
Touche. Outstanding arguments. Keep up the great effort.
Wow, this post is good, my younger sister is analyzing these things, therefore I am going to let know her.
There's certainly a lot to learn about this topic. I like all the points you've made.
所有文章都令人印象深刻。由衷感谢 带来的灵感。
你 百分百 分享经验。坚持!
不常看到, 这么高质量的内容。谢谢。