05avalon - vm监控属性 ($watch)_vm.$watch 监听数组元素变化-CSDN博客

本文链接：https://blog.csdn.net/qq_20042935/article/details/89318604

本文深入探讨了Avalon框架中的$watch机制，解释了如何使用该方法监听VM对象属性变化，包括子级对象及对象数组的属性变化。文章强调了$watch无法监听函数或简单数组元素的变化，并详细说明了监听函数的参数及其作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在VM中，改变它们会引起视图改变的属性。如果一个属性是 $ 开头, 或在 定义时放在$skipArray数组中 ,或是函数或 节点元素 , 它们都不会转换成监控属性.

此外, 改变监控属性的值还会触发对应的$watch 监听回调.

在avalon早期是, 存在一个对象能mixin进每个VM,让VM具有$watch, $unwatch, $fire, $events等方法或属性. 这有点像jQuery的on, off, trigger方法,只是为了更造近angular等MVVM框架,名字起成这样.

此方法是用于监听vm中的对象的属性变化.
换言之,它不能监听函数,不能监听简单数组的元素变化(如[1,2,3]变成[4,2,3])

它能监听子级对象的属性变化,能监听对象数组的属性变化(如[{a:1,b:2}]变成[{a:‘change’,b:2}]), 还有数组的长度属性变化。

var unwatch = vm.$watch("aaa", function observe(a, b) {
    expect(a).to.be(6)
    expect(b).to.be(2)
})
unwatch() //移除当前$watch回调

当解除监听后,以后aaa属性的值再发生变化,那么observe方法就不会再执行. 注意unwatch不等于observe

监听函数有三个参数，第一个是新值，第二个是旧值，第三个是发生变动的属性的名字。

$ watch方法供与其他操作DOM的库一起使用的,如富文本编辑器什么. 在$watch回调里更新VM自身的属性是非常危险的事,很容易引发死循环