Web Components 是一项新兴的前端技术，它使开发者能够根据具体的需求创建定制化的 HTML 元素，并能够在任何网页中使用。Polymer 是 Web Components 的一种实现方式，是一套用于构建 web 组件的库，尤其适合构建复杂组件。在 Polymer 中，当一个元素的属性发生变化时，可以触发属性更改事件，并且可以在事件中获取到新值和旧值，这在组件开发中非常有用。
监听元素属性的变化
在 Polymer 中，可以通过定义 observers 属性，来监听元素属性的变化。例如，我们有以下 HTML 元素：
<my-element foo="abc"></my-element>
其中，my-element 元素有一个 foo 属性，我们想要监听这个属性的变化。我们可以以以下方式定义 my-element：
-- -------------------- ---- -------
----- --------- ------- --------------- -
------ --- ---------- -
------ -------------- ---------------
-
------ --- ------------ -
------ -
---- -
----- -------
------ ---
--------- -------------
-
-
-
--------------------- --------- -
---------------- ------- ---- ----------- -- --------------
-
-
----------------------------------- -----------在上面的代码中，我们使用了 Polymer 的 static get properties() 方法来定义 foo 属性，并且指定了一个 observer，即 _fooChanged 方法。该方法会在 foo 属性变化时被调用，传递给该方法的参数为新值和旧值。在 _fooChanged 方法中，我们可以获取到 foo 属性的新值和旧值，并进行一些特定的操作。在这个例子中，我们只是简单地把值输出到控制台。
此时，当我们在代码中对 foo 属性进行修改时，就会触发 _fooChanged 方法，输出 Foo 的新值和旧值。例如，当我们执行以下代码时：
const elem = document.querySelector('my-element');
elem.foo = 'def';就会在控制台输出：Foo changed from abc to def。
使用 computed 属性
在 Polymer 中还可以使用 computed 属性，来根据其他属性的值计算出新的属性值。computed 属性本身是只读的，只能被计算，不能被赋值。当影响 computed 属性值的属性变化时，Polymer 会重新运行计算函数，并更新 computed 属性的值。
例如，我们有以下 HTML 元素：
<my-element foo="abc"></my-element>
我们想要定义一个 bar 属性，它的值等于 foo 属性的长度，我们可以使用 Polymer 的 readOnly 描述符和 computed 函数来实现：
-- -------------------- ---- -------
----- --------- ------- --------------- -
------ --- ---------- -
------ -------------- --------------
-
------ --- ------------ -
------ -
---- -
----- -------
------ ---
--------- -------------
--
---- -
----- -------
--------- -----
--------- ------------------
-
-
-
---------------- -
------ -----------
-
--------------------- --------- -
---------------- ------- ---- ----------- -- --------------
-
-
----------------------------------- -----------在上面的代码中，我们使用了 Polymer 的 readOnly 描述符来定义了 bar 属性是只读的属性，即不可手动赋值。computed 函数 _computeBar() 接受 foo 属性的值，并返回计算出的 bar 属性的值。在 properties 中，我们定义了 bar 属性的计算方法为 _computeBar(foo)。
当 foo 属性变化时，Polymer 会重新运行 _computeBar() 计算函数，并更新 bar 属性的值。在这个例子中，当我们执行以下代码时：
const elem = document.querySelector('my-element');
console.log(elem.bar); // 输出 3
elem.foo = 'def';
console.log(elem.bar); // 输出 3就会在控制台分别输出 3 和 4，说明 bar 属性的值已经自动计算并更新到新的值。
实现 observe 方法
除了使用 observer 和 computed，我们还可以在 Polymer 组件中通过实现 observer 方法，手动监听多个属性的变化，并且可以在这个方法中处理这些属性的变化。例如，我们有以下 HTML 元素：
<my-element foo="abc" bar="def"></my-element>
我们想要监听 foo 和 bar 属性的变化，并且在其中一个属性变化时，将两个属性的值拼接到一起，然后输出到控制台。我们可以通过实现 observe() 方法来实现这个功能：
-- -------------------- ---- -------
----- --------- ------- --------------- -
------ --- ---------- -
------ ---------------------------
-
------ --- ------------ -
------ -
---- -
----- -------
------ ---
--
---- -
----- -------
------ ---
--
------- -
----- -------
------ ---
--
-
-
------ --- ----------- -
------ -
----------------------- ------
-
-
---------------------- ---- -
----------- - --- - ----
----------------- ------- ---- ------- ------- -----------------
-
-
----------------------------------- -----------在上面的代码中，我们定义了三个属性 foo、bar 和 foobar，其中 foobar 是我们拼接后的字符串。在 properties 中，我们只定义了类型和初始值，没有定义 observer 或 computed。
我们通过 static get observers() 方法来定义监听函数，函数名为 _observeFooAndBar()，这个方法接受 foo 和 bar 两个参数，这是 Polymer 能够自动识别调用该函数的参数并将其传递给函数。在 _observeFooAndBar() 方法中，我们将 foo 和 bar 拼接在一起，然后将结果赋值给 foobar 属性，并输出到控制台。
同样，当 foo 和 bar 属性变化时，Polymer 会自动调用 _observeFooAndBar() 方法，并将新的值传递给该方法。在这个例子中，当我们执行以下代码时：
const elem = document.querySelector('my-element');
elem.foo = 'lmn';
elem.bar = 'opq';就会在控制台输出 Foo: lmn, Bar: opq, Foobar: lmnopq。
总结
Polymer 提供了多种方式来监听元素属性的变化，包括 observer、computed 和 observe。通过合理地使用这些方法，可以使代码更加清晰简洁，提高组件的可维护性和可扩展性。同时，我们也可以通过这些方法来实现一些更加复杂的功能，如依赖其他属性的计算结果、处理多个属性的变化过程等。最后，我们还可以通过这些方法来提高组件性能，减少不必要的运算和重复渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f6db0968c7c53b0dc9288