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监听数据变化的更多相关文章

  1. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  2. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  3. 关于微信小程序使用watch监听数据变化的方法

    众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...

  4. $scope.$watch()——监听数据变化

    $scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...

  5. $watch监听数据变化和run方法

    angular中$watch方法可以监听数据的变化. $scope.$watch('phone',function(){ $scope.phone.fre = $scope.phone.num> ...

  6. mvc 缓存 sqlCacheDependency 监听数据变化

    mvc 缓存   对于MVC有Control缓存和Action缓存. 一.Control缓存 Control缓存即是把缓存应用到整个Control上,该Control下的所有Action都会被缓存起来 ...

  7. 微信小程序实现watch属性监听数据变化

    Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...

  8. ZooKeeper 笔记(2) 监听数据变化

    ZK中的每个节点都可以存储一些轻量级的数据,这些数据的变化会同步到集群中的其它机器.在应用中程序员可以添加watcher来监听这些数据的变化,watcher只会触发一次,所以触发过后想要继续监听,必须 ...

  9. vue17 $watch 监听数据变化

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Celery详解(3)

    1.什么是Celery? Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列,同时也支持任务调度 2.Celery架构 Celery的架构由三部分组成,消息中 ...

  2. 201871010110-李华《面向对象程序设计（java）》第十一周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  3. 桌面图标管理工具-Rolan(网上收集，仅供学习与研究,支持正版)

    Rolan 是一个轻量级启动器,“你可以通过将文件拖到软件窗口中,然后通过像 QQ 一样的吸附或者键盘热键随时呼出,点击图标即可启动,使用起来非常方便快捷! 官网:https://getrolan.c ...

  4. 20180711模拟赛T3——聚变

    文件名: fusion 题目类型: 传统题 时间限制: 3秒 内存限制: 256MB 编译优化: 无 题目描述 知名科学家小A在2118年在计算机上实现了模拟聚变的过程. 我们将她研究的过程简化. 核 ...

  5. 文件处理file handling

    #1. 打开文件,得到文件句柄并赋值给一个变量 #2. 通过句柄对文件进行操作 #3. 关闭文件 #1.open函数打开文件,open找的是系统的编码gbkf = open("陈粒" ...

  6. LeetCode 241. Different Ways to Add Parentheses为运算表达式设计优先级 (C++)

    题目: Given a string of numbers and operators, return all possible results from computing all the diff ...

  7. requests--会话对象，ssl验证

    会话对象 前面我们使用了添加cookie的方式来进行接口的访问,如果有几十个接口都要依赖登录,难道我们都要加上吗? Request的会话对象让你能够跨请求保持某些参数,它也会在同一请求Session实 ...

  8. 10.24考试题解qwq

    考点难度都很合适的一套题目,大概在day1到day2之前 T1 猴猴最喜欢在树上玩耍,一天猴猴又跳上了一棵树,这棵树有N个苹果,每个苹果有一个编号,分别为0~N-1,它们之间由N-1个树枝相连,猴猴可 ...

  9. MySQL实战45讲学习笔记：第二十讲

    一.引子 在上一篇文章最后,我给你留了一个关于加锁规则的问题.今天,我们就从这个问题说起吧. 为了便于说明问题,这一篇文章,我们就先使用一个小一点儿的表.建表和初始化语句如下(为了便于本期的例子说明, ...

  10. [LeetCode] 174. Dungeon Game 地牢游戏

    The demons had captured the princess (P) and imprisoned her in the bottom-right corner of a dungeon. ...