Web Components 是一种用于创建可重复、可重用和可维护组件的 Web 技术。其中，属性是组件中的一个重要概念，每个组件都会有其自己的属性。那么如何监听 Web Components 中的属性变化呢？
何时需要监听 Web Components 中的属性变化
在开发 Web Components 时，我们通常需要监听组件中的属性变化。例如，当某个属性发生变化时，可能需要重新渲染组件、加载新数据、更新内部状态等操作。
如何监听 Web Components 中的属性变化
在 Web 标准中，提供了两种方式来实现对 Web Components 中属性变化的监听。分别是使用 Object.observe() 和使用 MutationObserver。
使用 Object.observe()
Object.observe() 是 JavaScript 语言提供的一个 API，用于监听 Object 对象中的属性变化。当 Object 对象的某个属性发生变化时，Object.observe() 会触发回调函数。
下面是一个示例代码：
let person = { name: "Jack", age: 20 };
Object.observe(person, function(changes) {
console.log(changes);
});
person.age = 21; // Output: [{ name: "age", type: "update", object: { name: "Jack", age: 21 } }]上述代码中，我们定义了一个 person 对象，并使用 Object.observe() 监听对象的变化。当 person 对象中的 age 属性发生变化时，Object.observe() 会触发回调函数并输出变化信息。其中，回调函数的参数 changes 包含了变化的信息，如属性名、变化类型、对象等。
对于 Web Components 中的属性变化监听，可以将 Web Component 对象传入 Object.observe() 中进行监听，如下所示：
let myComponent = document.querySelector("my-component");
Object.observe(myComponent, function(changes) {
console.log(changes);
});使用 MutationObserver
MutationObserver 是 Web API 提供的一种监听 DOM 变化的方法，可以监听 DOM 的属性的改变、子节点的添加、删除、文本内容的改变等变化。
下面是一个示例代码：
-- -------------------- ---- -------
--- ------ - ---------------------------------------
--- -------- - --- ------------------------------------ -
------------------------------------ -
---------------------------
---
---
--- ------ - - ----------- ---- --
------------------------ --------上述代码中，我们首先通过 querySelector 获取到 my-component 组件的 DOM 对象，并使用 MutationObserver 对象设置监听器。在监听器的回调函数中，通过遍历回调参数中的 mutations 数组获取到属性变化的信息，其中 mutations 中的每个元素代表了某个 DOM 节点的变化信息。
其中，可以通过 config 对象配置需要监听的属性类型。上述代码通过 { attributes: true } 表示需要监听 DOM 节点属性的变化。其他配置项包括 childList 和 characterData，分别表示子节点的变化和文本内容的变化。
对于 Web Components 中的属性变化监听，可以将 Web Component 对象的 Shadow DOM 根节点传入 MutationObserver 中进行监听，如下所示：
-- -------------------- ---- ------- --- ----------- - --------------------------------------- --- ---- - ----------------------- --- -------- - --- ------------------------------------ - ----------------------- --- --- ------ - - ----------- ---- -- ---------------------- --------
总结
在 Web Components 开发中，我们通常需要监听组件中的属性变化。对于 Web Components 中的属性变化监听，可以使用 Object.observe() 和 MutationObserver 两种方式来实现。其中，Object.observe() 适用于监听对象的属性变化，MutationObserver 则适用于监听 DOM 节点属性的变化。在代码的具体实现中，可以根据需要选择使用不同的方法来实现属性变化的监听。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491988b48841e9894fa2113