1.VNode 钩子
在每个组件或html标签上,我们可以使用一些特殊的(文档没写的)钩子作为事件监听器。这些钩子有:
-
onVnodeBeforeMount
-
onVnodeMounted
-
onVnodeBeforeUpdate
-
onVnodeUpdated
-
onVnodeBeforeUnmount
-
onVnodeUnmounted
我主要是在组件上使用onVnodeMounted,当需要在组件挂载时执行一些代码,或者在更新时使用onVnodeUpdated进行调试,可以确定的是所有这些钩子都能在某些情况下派上用场。
<script setup> import { ref } from 'vue' const count = ref(0) function onMyComponentMounted() {} function divThatDisplaysCountWasUpdated() {} </script> <template> <MyComponent @vnodeMounted="onMyComponentMounted" /> <div @vnodeUpdated="divThatDisplaysCountWasUpdated">{{ count }}</div> </template>
2、事件的销毁
当一个组件被销毁时,我们应该清除组件中添加的 全局事件 和 定时器 等来防止内存泄漏
Vue3 的 HOOK 可以让我们将事件的声明和销毁写在一起,更加可读
function scrollFun(){ /* ... */} document.addEventListener("scroll", scrollFun) onBeforeUnmount(()=>{ document.removeEventListener("scroll", scrollFun) })
Vue2 可以在 optionsAPI
beforeDestroy 中销毁事件
export default { created() { document.addEventListener("scroll", scrollFun) }, beforeDestroy(){ document.removeEventListener("scroll", scrollFun) } }
标签:vue,document,几个,钩子,销毁,scrollFun,组件,分享,scroll From: https://www.cnblogs.com/jzm2842688813/p/17988617