From 2baca913ed61eee1b57776597fdf21362a99d529 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Wed, 16 Apr 2025 17:22:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9B=91=E5=90=ACdom=E5=8F=98=E6=9B=B4?=
 =?UTF-8?q?=20mutationobserver?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MutationObserver前端使用.md           | 79 +++++++++++++++++++
 src/views/demo/mutationobserver/index.vue     | 18 +++++
 2 files changed, 97 insertions(+)
 create mode 100644 src/views/demo/mutationobserver/MutationObserver前端使用.md
 create mode 100644 src/views/demo/mutationobserver/index.vue

diff --git a/src/views/demo/mutationobserver/MutationObserver前端使用.md b/src/views/demo/mutationobserver/MutationObserver前端使用.md
new file mode 100644
index 0000000..79d7081
--- /dev/null
+++ b/src/views/demo/mutationobserver/MutationObserver前端使用.md
@@ -0,0 +1,79 @@
+ # 前端使用mutationObserver
+
+`mutationObserver`是一个在浏览器环境中一种用于监听DOM变化的JavaScript API，它可以用于监听 DOM 树中指定节点及其子节点的变化，当节点内容、属性、子节点结构等发生改变时，它可以及时检测到并触发回调函数。这对于前端开发来说非常有用，可以被用来监控 DOM 变化、异步数据加载和自定义组件等场景。
+
+## 基本用法
+
+```js
+// 创建一个 MutationObserver 实例，监听目标节点的变化
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    console.log(mutation.type); // 打印出变化类型，例如 childList、attributes 等
+  });
+});
+
+// 配置 MutationObserver，指定监听的节点和监听类型
+const config = {
+  attributes: true, // 监听属性变化
+  childList: true, // 监听子节点变化
+//   characterData: true, // 监听文本内容变化
+  subtree: true // 监听后代节点变化
+};
+
+// 将 MutationObserver 实例绑定到一个目标节点
+const targetNode = document.getElementById("target");
+
+
+observer.observe(targetNode, config);
+
+```
+
+上面的代码创建了一个`MutationObserver`实例，并将其绑定到一个目标节点上。当目标节点或其子孙节点发生变化时，`MutationObserver`实例会调用传入的回调函数，其中参数`mutations`是一个`MutationRecord`数组，包含了所有变化记录的信息。
+
+## 监听类型
+
+`MutationObserver`的`config`参数可以用来指定监听的类型，它有以下几个属性：
+
+* `attributes`：监听属性变化；
+* `childList`：监听子节点的添加、删除；
+* `characterData`：监听文本内容的变化；
+* `subtree`：监听目标节点的所有后代节点的变化。
+
+我们可以将多个类型组合起来，例如：
+
+```js
+const config = {
+  attributes: true, // 监听属性变化
+  childList: true, // 监听子节点变化
+  subtree: true // 监听后代节点变化
+};
+
+```
+
+上面的配置表示监听目标节点及其子孙节点的所有变化。
+
+## 断开监听
+
+我们可以通过`disconnect`方法来断开`MutationObserver`实例的监听：
+
+```js
+observer.disconnect();
+
+```
+
+## 应用场景
+
+`mutationObserver`的应用场景非常广泛，以下是一些常见的例子：
+
+* 自动保存表单：监听表单内容的变化，自动保存表单内容，避免用户手动点击保存按钮；
+* 自动加载数据：监听列表滚动条位置的变化，自动加载更多数据；
+* 观察者模式：监听一个对象的变化，当变化发生时触发相应的回调函数。
+* 自动获取页面高度：监听页面添加元素成员,自动计算高度（微页面组装元素列表）
+
+总之，`mutationObserver`可以帮助我们在DOM变化时及时更新页面，并提升用户体验。
+
+## 注意事项
+
+* 在监听节点变化时，需要注意避免无限循环，例如在回调函数中修改了被监听的节点，会导致 MutationObserver 不断触发。
+* 在监听异步数据加载和自定义组件等场景时，需要注意是否有对应的节点或属性需要监听。
+* 在兼容性方面，MutationObserver 在 IE9 及以下版本不支持。
\ No newline at end of file
diff --git a/src/views/demo/mutationobserver/index.vue b/src/views/demo/mutationobserver/index.vue
new file mode 100644
index 0000000..b46739c
--- /dev/null
+++ b/src/views/demo/mutationobserver/index.vue
@@ -0,0 +1,18 @@
+<template>
+    <div
+        class="markdown-body"
+        v-html="htmlStr"
+    ></div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { marked } from 'marked';
+import { getMarkdownContent } from '@/utils/tools';
+
+const htmlStr = ref('');
+
+getMarkdownContent('./md/MutationObserver前端使用.md').then((res) => {
+    htmlStr.value = marked(res);
+});
+</script>