手撕Vue-数据驱动界面改变上

经过上一篇的介绍,已经实现了监听数据的变化,接下来就是要实现数据变化后,界面也跟着变化,这就是数据驱动界面改变。

想要实现数据变化之后更新UI界面,我们可以使用发布订阅模式来实现,先定义一个观察者类, 再定义一个发布订阅类, 然后再通过发布订阅的类来管理观察者类。

接下来我们就来实现这个代码。

定义一个观察者类,观察属性的变化,当属性变化时,触发回调函数。

class Watcher {
    constructor(vm, attr, cb) {
        this.vm = vm;
        this.attr = attr;
        this.cb = cb;

        // 在创建观察者对象的时候就去获取当前的旧值
        this.oldValue = this.getOldValue();
    }

    getOldValue() {
        return CompilerUtil.getValue(this.vm, this.attr);
    }

    /**
     * 更新的方法, 用于判断新值和旧值是否相同
     * 如果不相同, 那么就调用回调函数
     */
    update() {
        let newValue = CompilerUtil.getValue(this.vm, this.attr);

        if (newValue !== this.oldValue) {
            this.cb(newValue, this.oldValue);
        }
    }
}

上方的类中主要有三个属性,分别是vm, attr, cb,vm是Vue的实例,attr是属性名,cb是回调函数。

定义了一个getOldValue方法,用于获取旧值,这个方法在创建观察者对象的时候就会调用,用于获取旧值。

定义了一个update方法,用于更新数据,当数据发生变化时,就会调用这个方法,用于判断新值和旧值是否相同,如果不相同,就调用回调函数。

接下来我们就来定义一个发布订阅类,用于管理观察者对象。

class Dep {
    constructor() {
        // 这个数组就是专门用于管理某个属性所有的观察者对象的
        this.subs = [];
    }

    /**
     * 订阅观察的方法
     * @param watcher 观察者对象
     */
    addSub(watcher) {
        this.subs.push(watcher);
    }

    /**
     * 发布订阅的方法
     */
    notify() {
        this.subs.forEach(watcher => watcher.update());
    }
}

上方的类中主要有两个方法,分别是addSub和notify:

  • addSub方法用于订阅观察的方法,将观察者对象添加到数组中。
  • notify方法用于发布订阅的方法,遍历数组中的观察者对象,调用观察者对象的update方法。

构造器中定义了一个数组,用于管理某个属性所有的观察者对象。

好了,现在我们已经定义了观察者类和发布订阅类,先到此为止,下一篇文章再继续。

posted @   BNTang  阅读(82)  评论(0编辑  收藏  举报
  1. 1 总会有人离开 王巨星
  2. 2 月亮 孟凡明
  3. 3 迟里乌布
  4. 4 我只能离开 颜人中
  5. 5 达尔文 蔡健雅
  6. 6 夜色滚烫 叶明净
  7. 7 你的星环 路飞文
  8. 8 不再说话 三块木头
  9. 9 黄昏 粥粥和小伙/粥粥
  10. 10 爱不单行 刘大拿
  11. 11 心动贩卖机 PIggy
  12. 12 别来无恙 苏星婕
  13. 13 我们的歌 刘大拿
  14. 14 一直很安静 王贰浪
  15. 15 去有风的地方 清音
  16. 16 雪 Distance Capper/罗言
  17. 17 坏女孩 徐良/小凌
  18. 18 乐园 沧桑Cang333/虎皮蛋/曲甲
  19. 19 Ayo(Explicit) Chris Brown/Tyga
  20. 20 我的美丽feat.海洋Bo 海洋Bo/高睿
  21. 21 世事可爱 粥粥和小伙/粥粥
  22. 22 我记得 赵雷
  23. 23 我想牵着你的手 许嵩
  24. 24 人们都不懂 刘诺然
  25. 25 寻一个你(电视剧《苍兰诀》温情主题曲) TTTTTeehom
  26. 26 子莫格尼 杉和
  27. 27 Cat Cafe Shoffy
  28. 28 风停了雨停了我们还拥抱着 Superluckyqi
  29. 29 寂寞沙洲冷 于潼
  30. 30 三国恋 王巨星
  31. 31 达尔文 林俊杰
  32. 32 有些 颜人中
  33. 33 小模样 张小只ya
  34. 34 是否 程响
  35. 35 楼顶上的小斑鸠 队长
  36. 36 笑场 薛之谦
  37. 37 还是分开 张叶蕾
  38. 38 修炼爱情 林俊杰
  39. 39 二零三 毛不易
  40. 40 雅俗共赏 许嵩
  41. 41 Serendipity 古瑞斯Graps/Zakiya晴子
  42. 42 就让这大雨全都落下·2023 刘大拿
  43. 43 老男孩 筷子兄弟
  44. 44 有何不可 许嵩
  45. 45 缓缓 杜宣达
  46. 46 好久不见 陈奕迅
  47. 47 爱的魔法(Cover 金莎) 封茗囧菌
  48. 48 在你的身边 盛哲
  49. 49 带我去找夜生活 告五人
  50. 50 假面舞会 很美味
  51. 51 STAY The Kid LAROI/Justin Bieber
  52. 52 我好想睡觉的 无敌西红柿
  53. 53 日不落(温柔版)
  54. 54 恋爱画板 锦零
  55. 55 7710 好乐无荒/尹露浠
  56. 56 给你呀(又名:for ya) 蒋小呢
  57. 57 Love Story Taylor Swift
  58. 58 Plain Jane(Remix 13z) 鱼幼微
  59. 59 晚风 7opy/BT07
  60. 60 拜托 孙晨
  61. 61 乌梅子酱 李荣浩
  62. 62 南半球与北海道 范倪Liu
  63. 63 星河万里 Rom邢锐
是否 - 程响
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : 呆踹

作曲 : 呆踹

编曲 : 刘圣华

出品人 : 潘鸿业/陆瑒

午后的 松柏树下 随风摇晃的 枝丫

落叶 送别了盛夏 温度也 急转直下

漫步在 肩并肩 走过的路 回忆 应接不暇

也 会有 遗憾吧 比如 我失去了他

在纸上 涂涂画画 心事 不经意的 写下

仍会 莫名的牵挂 写下的 名字 是他

曾经的 情投意洽 如今早已 各自天涯

是否 要留下遗憾 才让人 念念不忘

是否 要与你无关 内心才 毫无波澜

从前的 侃侃而谈 然后的 惴惴不安

在 喧嚣之外 孤单 戒掉 廉价的 浪漫

为何 留下了遗憾 留下了 长吁短叹

似 从未走出一般 来来回回 兜兜又转转

与其 强求的圆满 不如 坦然的 离散

等待着 大雾尽散 清风白云 与我相伴

在纸上 涂涂画画 心事 不经意的 写下

仍会 莫名的牵挂 写下的 名字 是他

曾经的 情投意洽 如今早已 各自天涯

是否 要留下遗憾 才让人 念念不忘

是否 要与你无关 内心才 毫无波澜

从前的 侃侃而谈 然后的 惴惴不安

在 喧嚣之外 孤单 戒掉 廉价的 浪漫

为何要 留下遗憾 留下了 长吁短叹

似 从未走出一般 来来回回 兜兜又转转

与其 强求的圆满 不如 坦然的 离散

等待着 大雾尽散 清风白云 与我相伴

是否 要留下遗憾 才让人 念念不忘

是否 要与你无关 内心才 毫无波澜

从前的 侃侃而谈 然后的 惴惴不安

在 喧嚣之外 孤单 戒掉 廉价的 浪漫

为何 留下了遗憾 留下了 长吁短叹

似 从未走出一般 来来回回 兜兜又转转

与其 强求的圆满 不如 坦然的 离散

等待着 大雾尽散 清风白云 与我相伴

混音工程师 : 王朋

母带 : 全相彦

监制 : 巩一凡@骁Studio

总监制 : 闫骁男@骁Studio

视觉设计 : 华玮轩

宣传发行 : 冷小婧

企划 : 袋熊/刘芳/酸奶麦片/马可

版权商务 : 温悉

统筹 : 陈亚飞

营销 : 银河方舟X壳壳菠萝

项目总监 : 庄有豪

OP : 北京金翼龙国际文化传媒有限公司

SP : 银河方舟

【未经著作权人许可 不得翻唱翻录或使用】

点击右上角即可分享
微信分享提示