js 实现watch监听数据变化
1.js
/**
* @desc 属性改变监听，属性被set时出发watch的方法，类似vue的watch
* @author Jason
* @study https://www.jianshu.com/p/00502d10ea95
* @data 2018-04-27
* @constructor
* @param {object} opts - 构造参数. @default {data:{},watch:{}};
* @argument {object} data - 要绑定的属性
* @argument {object} watch - 要监听的属性的回调
* watch @callback (newVal,oldVal) - 新值与旧值
*/ 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) {
const typeStr = Object.prototype.toString.apply(target); return typeStr.slice(8, -1);
} setData(_key){
Object.defineProperty(this,_key,{
get: function () {
return this.$data[_key];
},
set : function (val) {
const oldVal = this.$data[_key];
if(oldVal === val)return val;
this.$data[_key] = val;
this.$watch[_key] && typeof this.$watch[_key] === 'function' && (
this.$watch[_key].call(this,val,oldVal)
);
return val;
},
});
}
} // export default watcher;
2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>wathc</title>
</head>
<body>
<script src="./watch.js"></script>
<script>
let wm = new watcher({
data:{
a: 0,
b: 'hello'
},
watch:{
a(newVal,oldVal){
console.log(newVal, oldVal); // 111 0
}
}
})
wm.a = 111
</script>
</body>
</html>
3. 给vm.a 从新赋值 就能看到 newVal 和oldVal的变化
js 实现watch监听数据变化的更多相关文章
- vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- 关于微信小程序使用watch监听数据变化的方法
众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...
- $scope.$watch()——监听数据变化
$scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...
- $watch监听数据变化和run方法
angular中$watch方法可以监听数据的变化. $scope.$watch('phone',function(){ $scope.phone.fre = $scope.phone.num> ...
- mvc 缓存 sqlCacheDependency 监听数据变化
mvc 缓存 对于MVC有Control缓存和Action缓存. 一.Control缓存 Control缓存即是把缓存应用到整个Control上,该Control下的所有Action都会被缓存起来 ...
- 微信小程序实现watch属性监听数据变化
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...
- ZooKeeper 笔记(2) 监听数据变化
ZK中的每个节点都可以存储一些轻量级的数据,这些数据的变化会同步到集群中的其它机器.在应用中程序员可以添加watcher来监听这些数据的变化,watcher只会触发一次,所以触发过后想要继续监听,必须 ...
- vue17 $watch 监听数据变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- JS高阶---作用域与作用域链
大纲: 主体: (1)概论 (2)层级 执行上下文层级为n+1原则 作用域层级也是n+1原则 验证: (3)函数作用域作用 隔离变量,不同作用域下,相同变量名不会有冲突 (4) .
- 解决Error: ENOENT: no such file or directory, scandir 'xxx\node-sass\vendor'
解决方案是执行以下方法: npm rebuild node-sass
- 子进程回收资源两种方式,僵尸进程与孤儿进程,守护进程,进程间数据隔离,进程互斥锁,队列,IPC机制,线程,守护线程,线程池,回调函数add_done_callback,TCP服务端实现并发
子进程回收资源两种方式 - 1) join让主进程等待子进程结束,并回收子进程资源,主进程再结束并回收资源. - 2) 主进程 “正常结束” ,子进程与主进程一并被回收资源. from multipr ...
- （day46）DOM、BOM、事件
目录 一.BOM (一)定义 (二)window对象 (三)window的子对象 (1)navigator对象 (2)screen对象 (3)history对象 (4)location对象 (5)弹出 ...
- xgboost：
https://www.zybuluo.com/Dounm/note/1031900 GBDT算法详解 http://mlnote.com/2016/10/05/a-guide-to-xgboost- ...
- 数据呈现到 ASP.NET Core MVC 中展示
终于要将数据呈现到 ASP.NET Core MVC 中的 视图 上了 将数据从控制器传递到视图的三种方法 在 ASP.NET Core MVC 中,有 3 种方法可以将数据从控制器传递到视图: 使用 ...
- day 22
Creativity requires the courage to let go of certainties. 创新需要勇气承担不确定性.
- VMWARE在UEFI下启动PE.ISO
1.编辑虚拟机设置→选项→高级→通过EFI而非BIOS引导勾选. 2.虚拟机→电源→打开电源时进入固件,进入之后修改光驱为第一引导. 3.挂载PE.ISO,启动时虚拟机顶部出现Press any ke ...
- [LeetCode] 352. Data Stream as Disjoint Intervals 分离区间的数据流
Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...
- C# HTTP系列11 以普通文件流方式上传文件远程服务器
系列目录 [已更新最新开发文章,点击查看详细] 应用程序中上传附件是最常使用的操作之一,ASP.NET客户端一般通过上传控件实现, <input type="file" ...