js 实现watch监听数据变化的代码
1.js
/** *@desc属性改变监听,属性被set时出发watch的方法,类似vue的watch *@authorJason *@studyhttps://www.jianshu.com/p/00502d10ea95 *@data2018-04-27 *@constructor *@param{object}opts-构造参数.@default{data:{},watch:{}}; *@argument{object}data-要绑定的属性 *@argument{object}watch-要监听的属性的回调 *watch@callback(newVal,oldVal)-新值与旧值 */ classwatcher{ constructor(opts){ this.$data=this.getBaseType(opts.data)==='Object'?opts.data:{}; this.$watch=this.getBaseType(opts.watch)==='Object'?opts.watch:{}; for(letkeyinopts.data){ this.setData(key) } } getBaseType(target){ consttypeStr=Object.prototype.toString.apply(target); returntypeStr.slice(8,-1); } setData(_key){ Object.defineProperty(this,_key,{ get:function(){ returnthis.$data[_key]; }, set:function(val){ constoldVal=this.$data[_key]; if(oldVal===val)returnval; this.$data[_key]=val; this.$watch[_key]&&typeofthis.$watch[_key]==='function'&&( this.$watch[_key].call(this,val,oldVal) ); returnval; }, }); } } //exportdefaultwatcher;
2.html
wathc