中文 | English
smart-observe
smart-observe 来自 Vue.js,是一个小巧、高效,用于监测 javascript 对象、数组、类 变化的库
安装
npm install --save smart-observe
或
bower install --save smart-observe
使用
observe.watch(target, expression, callback)
或 observe(target, expression, callback)
监测属性
const target = a: 1targeta = 3// 3 1
observe.compute(target, name, getter)
添加计算属性
const target = a: 1observeconsole// 2targeta = 3console// 6
observe.react(options)
监测属性并添加计算属性
const options =data:PI: MathPIradius: 1computed:{return thisPI * this // πr²}watchers:{console}methods:{return num * num}const target = observetargetradius = 3// area: 28.274333882308138
API
属性
名称 | 类型 | 值 | 说明 |
---|---|---|---|
observe.deep |
Boolean |
默认为 false |
如果为 true ,observe.watch(target, expression, callback) 将会对 target 深度监测 |
observe.sync |
Boolean |
默认为 false |
如果为 true ,observe.watch(target, expression, callback) 监测到属性变化时,立即调用回调函数 |
observe.default |
Function |
只能为 observe.react ,observe.watch 或 observe.compute , 默认为 observe.watch |
设置 observe(...) 实际调用的方法,写起来简洁一些 |
方法
observe(...)
- 为方法
observe.default
的语法糖,observe.default
参见属性
observe.watch(target, expression, callback)
target
: 任意对象expression
:String
或Function
callback
:Function
- 返回
Watcher
,调用watcher.teardown()
可以取消监测
observe.compute(target, name, accessor, cache)
target
: 任意对象name
:String
accessor
:Function
: 会作为getter
,等同传入 {get: accessor}Object
: 可以包含:(其中,至少包含get
或set
)get
:Function
set
:Function
cache
:Boolean
,可选,默认为true
,如果设为false
,每次读取计算属性都要重新计算
cache
:Boolean
,可选,默认为true
,仅当accessor
为Function
时有效。
observe.react(options, target)
options
:Object
,要配置的参数集合,可以包含:data
: 要附加的字段computed
: 要附加的计算属性watchers
: 要监测的属性和计算属性methods
: 要附加的方法,这些方法将会自动绑定target
target
: 任意对象,可选,默认为空对象,options
的参数将附加到此对象上- 返回
target