JS Object Observer, Build on the basis of ES6 proxy, use like vue's watch
Support circular reference
Can set watch depth and silence watch
$ npm install --save @xpf0000/objectobserverimport { Watcher, watch, unWatch } from "@xpf0000/objectobserver"
let obj = { a: 0, b: { b0: 1 } }
obj = Watcher(obj)
let config = {
'*': {
handler(newVal, oldVal) {}
},
a: function (newVal, oldVal) {},
b: {
handler(newVal, oldVal) {},
deep: true
},
'b.b0': function(newVal, oldVal) {}
}
watch(obj, config)
obj.a = 1
obj.c = 0
obj.b.b0 = 2
let arr = Watcher([])
let arr1 = Watcher(arr)
let arr2 = Watcher(arr)
let config1 = {
'*': {
handler(newVal, oldVal) {}
},
}
let config2 = {
'*': {
handler(newVal, oldVal) {}
},
}
watch(arr1, config1)
watch(arr2, config2)
arr.push(0)
arr1.push(1)
arr2.push(2)
unWatch(arr2, config2)set watch depth, default whole object
import {Watcher, watch, unWatch } from "@xpf0000/objectobserver"
let obj = { a: 0, b: { b0: 1 } }
obj = Watcher(obj, 1)
let config = {
'*': {
handler(newVal, oldVal) {}
},
}
watch(obj, config)
obj.b.b0 = 2 //won't trigger
obj.a = 1 // trigger
obj.c = 0 // triggerOnly observe this level or observe this level and subordinate level
import { Watcher, watch, unWatch } from "@xpf0000/objectobserver"
let obj = { a: 0, b: { b0: 1 } }
obj = Watcher(obj)
let config = {
'b': {
handler(newVal, oldVal) {},
deep: false
},
}
watch(obj, config)
obj.b = { c: 0 } // trigger
obj.b.c = 1 //won't trigger if deep is falseimport { Watcher, watch, unWatch } from "@xpf0000/objectobserver"
let obj = { a: 0, b: { b0: 1 } }
obj = Watcher(obj)
watch(obj, {...})
watch(obj, {...}, this) // set handler's run env
let watcher = watch(obj, {...})
watch.unWatch() // only clean this watcherimport { Watcher, watch, unWatch } from "@xpf0000/objectobserver"
let obj = { a: 0, b: { b0: 1 } }
obj = Watcher(obj)
unWatch(obj, {...}) // only clean this watcher
unWatch(obj) // clean all watcherAny contribution to the code or any part of the documentation and any idea and/or suggestion are very welcome.
# serve with hot reload at localhost:8080
npm run serve
# run test
npm run test
# distribution build-bundle
npm run buildThe MIT License (MIT). Please see License File for more information.