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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
通过实例学习React中事件节流防抖
Jun 17 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命名空间(namespace)的使用基础及示例
2014/08/18 PHP
PDO::query讲解
2019/01/29 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
js实现五星评价功能
2017/03/08 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python封装shell命令实例分析
2015/05/05 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python reduce()函数的用法小结
2017/11/15 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
出国留学介绍信
2014/01/13 职场文书
社区食品安全实施方案
2014/03/28 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
Vue深入理解插槽slot的使用
2022/08/05 Vue.js