Aurelia是一款流行的前端JavaScript框架，它提供了方便快捷的前端开发方式。在实际开发中，我们经常需要监听某个属性值的变化，然后进行相应的操作。这时候，通过Aurelia的属性变化订阅机制可以轻松地实现这一需求。
订阅属性变化
要订阅一个属性的变化，我们需要使用@bindable装饰器来定义该属性，并且在视图模板中使用与该属性绑定的元素。例如：
------ - -------- - ---- -------------------- ------ ----- ----------- - --------- ----------- -- --- -
在模板中，我们可以使用my-property.bind指令来将一个元素与这个属性绑定起来：
---------- ---- --------------------------------- -----------
当myValue的值改变时，myProperty的值也会相应地更新。但是，在有些情况下，我们希望能够监听到myProperty的变化，以便在属性值变化时执行一些逻辑。为此，我们可以通过@observable装饰器来定义一个可观察的属性：
------ - ---------- - ---- --------------------
------ ----- ----------- -
----------- -----------
-- ---
--------------------------- --------- -
-- --------
-
-myPropertyChanged方法会在myProperty的值发生变化时被调用。我们可以在该方法中执行一些处理逻辑，比如通知其他组件或更新视图等。
订阅数组变化
除了订阅普通属性的变化外，我们还可以通过Aurelia来监听数组元素的变化。要实现这一功能，需要使用@computedFrom和@collectionObserver装饰器。例如：
------ - ------------- ------------------ - ---- --------------------
------ ----- ----------- -
------- - ---
-------------------------------
--- ------------- -
------ --------------------
-
---------------------
----------------------- -
-- --------
-
-该代码定义了一个名为myArray的数组属性，以及两个用于监听数组变化的方法：arrayLength和myArrayChanged。其中，arrayLength使用了@computedFrom装饰器来计算数组长度，并且在数组长度发生变化时自动触发更新。而myArrayChanged则使用了@collectionObserver装饰器来监听整个数组的变化，当数组元素有增加、删除或替换时，该方法会自动被调用。
示例代码
下面是一个完整的示例代码，演示了如何使用Aurelia的属性变化订阅机制：
------ - --------- ----------- ------------- ------------------ - ---- --------------------
------ ----- ----------- -
--------- -----------
------- - ---
----------- ---------------------
-------------------------------
--- ------------- -
------ --------------------
-
---------------------
----------------------- -
-------------------- ---------- ---------
-
--------------------------- --------- -
----------------------- ---------- --------- ----------
-
------------------------------------- --------- -
--------------------------------- ---------- --------- ----------
-
-----------
---- -------------------------- ----------------------------
----- ---------------- -- -----------------------
---------------------
------
-----------在该例子中，我们定义了一个名为MyComponent的组件，其中包含了一个普通属性myProperty、一个
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28502