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

目录
相关文章
|
1月前
|
缓存 JavaScript 数据处理
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
43 0
|
8月前
|
监控
06avalon - vm计算属性 ($computed)
06avalon - vm计算属性 ($computed)
37 0
|
8月前
|
JavaScript
04avalon - vm内部属性($id)
04avalon - vm内部属性($id)
33 0
|
8月前
|
Web App开发 JavaScript
03avalon - vm介绍
03avalon - vm介绍
35 0
|
10月前
|
缓存
computed【计算属性】watch【监听】methods【方法】的区别
computed【计算属性】watch【监听】methods【方法】的区别
|
8月前
09avalon - vm是如何作用视图
09avalon - vm是如何作用视图
32 0
|
1月前
|
JavaScript
Vue中$watch()方法和watch属性的区别
Vue中$watch()方法和watch属性的区别
50 1
|
1月前
|
JavaScript
Vue之监视属性(watch)
Vue之监视属性(watch)
|
1月前
|
JavaScript
Vue中的methods、computed计算属性和watch监听属性的使用和区别
Vue中的methods、computed计算属性和watch监听属性的使用和区别
|
1月前
|
缓存 监控 JavaScript
methods、computed、watch它们的差异与区别
在Vue中,Methods、Watch和Computed是三种用于处理数据和响应数据变化的不同方式。
61 0