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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
JS实现拖动示例代码
Nov 01 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
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 flock 文件锁详细介绍
2012/12/29 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
JavaScript 特殊字符
2007/04/05 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python判断某个用户对某个文件的权限
2016/10/13 Python
scrapy爬虫完整实例
2018/01/25 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
详解Python with/as使用说明
2018/12/13 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python将时分秒转换成秒的实例
2019/12/07 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
车间操作工岗位职责
2013/12/19 职场文书
公司道歉信范文
2014/01/09 职场文书
自我介绍演讲稿
2014/01/15 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
python自动化测试之Selenium详解
2022/03/13 Python