了解vue中监听数据变化

由于接触过c#,swift等语言,对于属性有所了解,所以像a.name = "jack"发生变化后,可以触发其他的操作并不觉得唐突。当有一天使用vue.js的时候发现。在js中竟然也可以这样做,简直太方便了。数据驱动view就是这样诞生的。

好奇心使然,还是研究了一下。这要感激ES5的访问器属性。get,set,跟c#中的属性非常的像。

vue其实就是将data = {...}重新的定义了get和set。在set中使用订阅发布来实现数据的监听。

来个栗子:

var bind = function (obj, key, callback) {
    var v = obj[key];
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function () {
            return v;
        },
        set: function (value) {
            var old = v;
            v = value;
            callback(old, value);
        }
    })
};

var a = { name: "austin" };

bind(a, "name", function (oldname, newname) {
    alert("i'm " + newname + ", old name is " + oldname);
});

现在你只要修改a.name就会弹出一个对话框。其他的就自己想想吧。抛砖引个玉O(∩_∩)O哈哈~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,067评论 19 139
  • 在微信小程序诞生之初,小冉就一直有关注这个有潜力的设计。当时还欣喜若狂,和老师他们连夜在群里讨论了“小程序”的前前...
    一个高中生的日常阅读 1,310评论 0 7
  • 为探望因病住进县城医院的哥哥,最近回了趟老家。与两年前那次探访相比,县城市容发生了很大变化,到了南门医院见到哥哥...
    涂水汤汤阅读 490评论 0 1
  • 你看树上那樱花 迫不及待的要离开妈妈 踏着春雨 收拾行囊 出发了 他们追着风调皮的玩捉迷藏 不信,你看那路口的花...
    夜空中最亮的星Z阅读 299评论 0 0
  • 自古以来,人间万事,经历多少风云变幻,桑田沧海,许多曾经纯美的事物,都落满了尘埃。任凭我们如何擦拭,也不可...
    0dc87d0ae62a阅读 374评论 0 1