指令的生命周期
一个指令定义的对象,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>
感谢大家观看,我们下期再见
[...]export default App 这就是React中用函数的方式实现页面的展示,看得出来React又向函数式编程的开发方式迈进。是否能够成为主流这还要看市场,另外React中的Hook也是函数式编程的体现。后面我们也会写到。如果你还对类组件感兴趣,可以看这一篇文章: React中类组件如何实现?感谢大家观看,我们下次再见。[...]
[...]}从上面可以看出,在React中我们使用this.setState来修改变量的值。在这里我们要注意this的指向问题,如果有不懂可以看:函数中的this指向componentDidMountcomponentDidMount是表示组件已被渲染到dom中,被挂载到DOM上,这里就不得不提一下在React中如何引入组件相关的内容了。那么如何引入组件呢?在React中非常简单import HelloWo[...]
of course like your web site but you need to test the spelling on quite a few of your posts. A number of them are rife with spelling problems and I in finding it very troublesome to inform the reality nevertheless I will surely come again again.
新年快乐!
十天看一部剧,还可以吧
@梦不见的梦 行,谢谢提醒,我优化一下
网站的速度有待提升,每次打开都要转半天还进不来呢
@React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了,报错了吗?
@Teacher Du 那是怕你们毕不了业,我大学那会儿给小礼品
我们大学那会,献血还给学分~