05avalon - vm监控属性 ($watch)

简介: 05avalon - vm监控属性 ($watch)

在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自身的属性是非常危险的事,很容易引发死循环

目录
相关文章
16avalon - 指令ms-attr(属性绑定)
16avalon - 指令ms-attr(属性绑定)
69 1
|
监控
06avalon - vm计算属性 ($computed)
06avalon - vm计算属性 ($computed)
64 0
|
JavaScript
04avalon - vm内部属性($id)
04avalon - vm内部属性($id)
54 0
|
Web App开发 JavaScript
03avalon - vm介绍
03avalon - vm介绍
51 0
computed【计算属性】watch【监听】methods【方法】的区别
computed【计算属性】watch【监听】methods【方法】的区别
|
1月前
|
API
Harmony 状态监听 @Monitor和@Computed
Harmony 状态监听 @Monitor和@Computed
46 0
|
2月前
|
存储 JSON JavaScript
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
详细介绍了微信小程序中组件的创建、引用(包括局部引用和全局引用)、样式隔离、组件的data、methods和properties,以及组件的数据监听器的使用方法和场景。
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
|
6月前
|
缓存 JavaScript
computed/watch深度监听
computed/watch深度监听
198 1
09avalon - vm是如何作用视图
09avalon - vm是如何作用视图
55 0
|
6月前
|
JavaScript
Vue中$watch()方法和watch属性的区别
Vue中$watch()方法和watch属性的区别
157 1