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


Posted in Javascript onOctober 13, 2019

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监听数据变化的代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
详解Node全局变量global模块
Sep 28 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
15 分钟掌握vue-next响应式原理
Oct 13 #Javascript
Vue3.x源码调试的实现方法
Oct 13 #Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 #Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 #Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 #jQuery
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 #Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 #Javascript
You might like
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python 表格打印代码实例解析
2019/10/12 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
python中Django文件上传方法详解
2020/08/05 Python
django中ImageField的使用详解
2020/12/21 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
文体活动实施方案
2014/03/27 职场文书
社区工作者演讲稿
2014/05/23 职场文书
离职感谢信怎么写
2015/01/22 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS