<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="watch.js"></script>
<script>
let vm = new Watcher({
data:{
a: 1,
b: 3
},
watch:{
a(val, oldVal){
this.b = val;
console.log(val, oldVal)
}
}
})
vm.a = 2;
</script>
</body>
</html>
class Watcher{
constructor(opts) {
this.$data = this.getBaseType(opts.data) == 'Object' ? opts.data : {}
this.$watch = this.getBaseType(opts.watch) == 'Object' ? opts.watch : {}
for(let key in opts.data){
this.setData(key)
}
}
getBaseType(target){
return Object.prototype.toString.call(target).slice(8,-1)
}
setData(_key){
Object.defineProperty(this, _key, {
get:function () {
return this.$data[_key]
},
set:function (newVal) {
const oldVal = this.$data[_key];
if(oldVal == newVal){
return oldVal
}
else{
this.$data[_key] = newVal;
this.$watch[_key] && typeof this.$watch[_key] == 'function' && (
this.$watch[_key].call(this, newVal, oldVal)
)
}
return newVal;
}
})
}
}