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

想要实现数据变化之后更新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方法。

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

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

手撕Vue-数据驱动界面改变上的更多相关文章

  1. Netty实现高性能IOT服务器(Groza)之手撕MQTT协议篇上

    前言 诞生及优势 MQTT由Andy Stanford-Clark(IBM)和Arlen Nipper(Eurotech,现为Cirrus Link)于1999年开发,用于监测穿越沙漠的石油管道.目标 ...

  2. 模拟源码深入理解Vue数据驱动原理(1)

    Vue有一核心就是数据驱动(Data Driven),允许我们采用简洁的模板语法来声明式的将数据渲染进DOM,且数据与DOM是绑定在一起的,这样当我们改变Vue实例的数据时,对应的DOM元素也就会改变 ...

  3. NN入门,手把手教你用Numpy手撕NN(一)

    前言 这是一篇包含极少数学推导的NN入门文章 大概从今年4月份起就想着学一学NN,但是无奈平时时间不多,而且空闲时间都拿去做比赛或是看动漫去了,所以一拖再拖,直到这8月份才正式开始NN的学习. 这篇文 ...

  4. 手撕公司SSO登陆原理

    Single Sign-on SSO是老生常谈的话题了,但部分同学对SSO可能掌握的也是云里雾里,一知半解.本次手撕公司的SSO登陆原理,试图以一种简单,流畅的形式为你提供 有用的SSO登陆原理. 按 ...

  5. 理解vue数据驱动

    vue是双向数据绑定的框架,数据驱动是他的灵魂,他的实现原理众所周知是Object.defineProperty方法实现的get.set重写,但是这样说太牵强外门了.本文将宏观介绍他的实现 使用vue ...

  6. 编译原理--05 用C++手撕PL/0

    前言 目录 01 文法和语言.词法分析复习 02 自顶向下.自底向上的LR分析复习 03 语法制导翻译和中间代码生成复习 04 符号表.运行时存储组织和代码优化复习 05 用C++手撕PL/0 在之前 ...

  7. 剖析手写Vue,你也可以手写一个MVVM框架

    剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...

  8. 优雅手撕bind函数(面试官常问)

    优雅手撕bind函数 前言: 为什么面试官总爱让实现一个bind函数? 他想从bind中知道些什么? 一个小小的bind里面内有玄机? 今天来刨析一下实现一个bind要懂多少相关知识点,也方便我们将零 ...

  9. (面试题)面试官为啥总是让我们手撕call、apply、bind?

    引言 上一篇关于<面试官为啥总是喜欢问前端路由实现方式>的文章发布后,发现还是挺受欢迎的.这就给我造成了一定的困惑 之前花了很长时间,实现了一个自认为创意还不错的关于前端如何利用node+ ...

  10. 手撕RPC框架

    手撕RPC 使用Netty+Zookeeper+Spring实现简易的RPC框架.阅读本文需要有一些Netty使用基础. 服务信息在网络传输,需要讲服务类进行序列化,服务端使用Spring作为容器.服 ...

随机推荐

  1. 创建一个基本的FastAPI应用程序

    Python 搭建 FastAPI 项目 要生成FastAPI项目的代码,你可以使用FastAPI的脚手架工具来快速创建一个基本的FastAPI应用程序. 以下是创建一个新的FastAPI项目的步骤: ...

  2. SQL Server 附加数据库,报只读文件,无权修改其中某些文件

    MSSQL 默认安装在 C盘下,由于C盘没空间了,迁到D盘,这时候在附件数据库是报了错误:附加数据库  因为它是只读的,它具有只读文件,无权修改其中某些文件 如果是可以附加,显示(只读)这时候不能删除 ...

  3. python发送邮件+多人+附件 !!!!

    import smtplib import os from email.header import Header from email.mime.text import MIMEText # shen ...

  4. 记一次go应用在k8s pod已用内存告警不准确分析

    版权说明: 本文章版权归本人及博客园共同所有,转载请在文章前标明原文出处( https://www.cnblogs.com/mikevictor07/p/17968696.html ),以下内容为个人 ...

  5. 厄拉多塞筛法的 Python 实现以及复杂度计算

    想要得到一个不大于N的数所有素数,可以先找到不超过根号N的所有素数,设2 = p1 < p2 < ......<pk ≤√N,然后在2,3,4......N里面进行下面的操作: 留下 ...

  6. HHKB 键盘布局记录以及一些闲言碎语

    HHKB (happy hacking keyboard) 是世界顶级键盘品牌,自 1996 年推出以来畅销至今.与其他键盘不同,HHKB 机身小巧,省略了 F1 - F12 功能键.光标键和 Pag ...

  7. elementUI表格单选

    html代码 <el-table :data="gkbmList" max-height="264" border @selection-change=& ...

  8. NOIP2020游记——AFO之战

    阅读时请播放此音乐,这是我精心挑选的,很适合本文. Day-0奇遇 考试前一天,不顺,很不顺,简直可以写小说了.(不想看我车店可以往下翻,Day-1在后边) 我是下午两点从齐齐哈尔出发前往省会哈尔滨的 ...

  9. Keep English Level-01

    state -- 声称,宣称,国家,政府 state-owned -- 国有的 He stated that "hell will break loose,politically and m ...

  10. 问题--VSCODE编写C含scanf无终端跳出

    1.问题 在VSCODE中编写C程序,用到scanf输入时,发现无终端输入数据 2.解决方法 在设置里搜索RunInTerminal,勾选该选项即可