可以使用Vue的生命周期钩子函数mounted
来监听一个节点是否存在页面中,代码如下:
<template>
<div>
<div ref="myNode"></div>
</div>
</template>
<script>
export default {
mounted() {
// 监听myNode节点是否存在
const observer = new MutationObserver((mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
for (let node of mutation.addedNodes) {
if (node === this.$refs.myNode) {
console.log('myNode节点已存在');
}
}
}
}
});
observer.observe(this.$el, { childList: true });
},
};
</script>
在上述代码中,我们首先在mounted
钩子函数中创建了一个新的MutationObserver
实例,该实例会监听当前组件的根节点this.$el
的子节点的变化。当新增一个节点时,会遍历本次变化列表,寻找是否有新增的节点是我们所需的目标节点this.$refs.myNode
,如果找到了,就表示该目标节点已经存在于页面中,这时我们可以做一些相关的操作。
需要注意的是,由于我们是在mounted
钩子函数中监听节点变化的,因此该节点必须在组件mounted
时已经渲染到了页面上才能被监听到。如果该节点是后续异步渲染的,可能需要使用$nextTick
等方法,在节点被渲染到页面上后再进行监听。