vue3 使用MutationObserver 观察dom子节点数量的变化
时间: 2024-11-12 20:12:52 浏览: 20
Vue 3 中,MutationObserver 可以帮助我们观察 DOM 中的属性变化,包括添加、删除或修改子节点。当你需要在 Vue 组件中监听子节点数量的变化以便动态响应数据更新时,可以这样做:
1. 首先,在组件的 `setup` 或者生命周期钩子里创建一个 MutationObserver 实例,因为它需要在特定的时间点开始观察。
```javascript
import { onMounted } from 'vue';
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
// mutation.addedNodes 或 mutation.removedNodes 包含了变动后的子节点列表
const addedNodes = mutation.addedNodes;
const removedNodes = mutation.removedNodes;
if (addedNodes.length > 0) {
console.log('子节点增加', addedNodes);
// 这里可以根据增加的节点处理相应业务逻辑
}
if (removedNodes.length > 0) {
console.log('子节点减少', removedNodes);
// 处理子节点减少的情况
}
}
});
});
```
2. 然后,在 `onMounted` 或其他合适的时机开始观察DOM:
```javascript
onMounted(() => {
observer.observe(document.querySelector('.parent-node'), { attributes: false, childList: true, subtree: true }); // 调整 '.parent-node' 替换为你实际需要监控的父元素选择器
});
```
3. 当不再需要观察时,记得关闭 Observer,例如在组件卸载前:
```javascript
onUnmounted(() => {
observer.disconnect();
});
```
阅读全文