奈寻味导航网 » 文章资讯 » js 实现watch监听数据变化的代码

js 实现watch监听数据变化的代码

2023-08-11 22:06:04 153

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

3.给vm.a从新赋值就能看到newVal和oldVal的变化

总结

以上所述是小编给大家介绍的js实现watch监听数据变化的代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
3162201930
czq8825@qq.com

js 实现watch监听数据变化的代码

热门推荐

随机推荐