vue基础知识十二:双向数据绑定是什么

news2024/11/5 20:25:42

在这里插入图片描述
一、什么是双向绑定

我们先从单向绑定切入单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新双向绑定就很容易联想到了,在单向绑定的基础上,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定举个栗子

在这里插入图片描述
当用户填写表单时,View的状态就被更新了,如果此时可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定关系图如下
在这里插入图片描述
二、双向绑定的原理是什么

我们都知道 Vue 是数据双向绑定的框架,双向绑定由三个重要部分构成

  • 数据层(Model):应用的数据及业务逻辑
  • 视图层(View):应用的展示效果,各类UI组件
  • 业务逻辑层(ViewModel):框架封装的核心,它负责将数据与视图关联起来

而上面的这个分层的架构方案,可以用一个专业术语进行称呼:MVVM这里的控制层的核心功能便是 “数
据双向绑定” 。自然,我们只需弄懂它是什么,便可以进一步了解数据绑定的原理

理解ViewModel

它的主要职责就是:

  • 数据变化后更新视图
  • 视图变化后更新数据

当然,它还有两个主要部分组成

  • 监听器(Observer):对所有数据的属性进行监听
  • 解析器(Compiler):对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

三、实现双向绑定

我们还是以Vue为例,先来看看Vue中的双向绑定流程是什么的

  1. new Vue()首先执行初始化,对data执行响应化处理,这个过程发生Observe中
  2. 同时对模板执行编译,找到其中动态绑定的数据,从data中获取并初始化视图,这个过程发生在Compile中
  3. 同时定义⼀个更新函数和Watcher,将来对应数据变化时Watcher会调用更新函数
  4. 由于data的某个key在⼀个视图中可能出现多次,所以每个key都需要⼀个管家Dep来管理多个Watcher
  5. 将来data中数据⼀旦发生变化,会首先找到对应的Dep,通知所有Watcher执行更新函数

流程图如下:
在这里插入图片描述
实现

先来一个构造函数:执行初始化,对data执行响应化处理

class Vue {  
  constructor(options) {  
    this.$options = options;  
    this.$data = options.data;  
        
    // 对data选项做响应式处理  
    observe(this.$data);  
        
    // 代理data到vm上  
    proxy(this);  
        
    // 执行编译  
    new Compile(options.el, this);  
  }  
} 

对data选项执行响应化具体操作

function observe(obj) {  
  if (typeof obj !== "object" || obj == null) {  
    return;  
  }  
  new Observer(obj);  
}  
  
class Observer {  
  constructor(value) {  
    this.value = value;  
    this.walk(value);  
  }  
  walk(obj) {  
    Object.keys(obj).forEach((key) => {  
      defineReactive(obj, key, obj[key]);  
    });  
  }  
}  

编译Compile

对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

在这里插入图片描述

class Compile {  
  constructor(el, vm) {  
    this.$vm = vm;  
    this.$el = document.querySelector(el);  // 获取dom  
    if (this.$el) {  
      this.compile(this.$el);  
    }  
  }  
  compile(el) {  
    const childNodes = el.childNodes;   
    Array.from(childNodes).forEach((node) => { // 遍历子元素  
      if (this.isElement(node)) {   // 判断是否为节点  
        console.log("编译元素" + node.nodeName);  
      } else if (this.isInterpolation(node)) {  
        console.log("编译插值⽂本" + node.textContent);  // 判断是否为插值文本 {{}}  
      }  
      if (node.childNodes && node.childNodes.length > 0) {  // 判断是否有子元素  
        this.compile(node);  // 对子元素进行递归遍历  
      }  
    });  
  }  
  isElement(node) {  
    return node.nodeType == 1;  
  }  
  isInterpolation(node) {  
    return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);  
  }  
}  

依赖收集

视图中会用到data中某key,这称为依赖。同⼀个key可能出现多次,每次都需要收集出来用⼀个Watcher来维护它们,此过程称为依赖收集多个Watcher需要⼀个Dep来管理,需要更新时由Dep统⼀通知

在这里插入图片描述

实现思路

  • defineReactive时为每⼀个key创建⼀个Dep实例
  • 初始化视图时读取某个key,例如name1,创建⼀个watcher1
  • 由于触发name1的getter方法,便将watcher1添加到name1对应的Dep中
  • 当name1更新,setter触发时,便可通过对应Dep通知其管理所有Watcher更新
// 负责更新视图  
class Watcher {  
  constructor(vm, key, updater) {  
    this.vm = vm  
    this.key = key  
    this.updaterFn = updater  
  
    // 创建实例时,把当前实例指定到Dep.target静态属性上  
    Dep.target = this  
    // 读一下key,触发get  
    vm[key]  
    // 置空  
    Dep.target = null  
  }  
  
  // 未来执行dom更新函数,由dep调用的  
  update() {  
    this.updaterFn.call(this.vm, this.vm[this.key])  
  }  
}

声明Dep

class Dep {  
  constructor() {  
    this.deps = [];  // 依赖管理  
  }  
  addDep(dep) {  
    this.deps.push(dep);  
  }  
  notify() {   
    this.deps.forEach((dep) => dep.update());  
  }  
}  

创建watcher时触发getter

class Watcher {  
  constructor(vm, key, updateFn) {  
    Dep.target = this;  
    this.vm[this.key];  
    Dep.target = null;  
  }  
}  
  

依赖收集,创建Dep实例

function defineReactive(obj, key, val) {  
  this.observe(val);  
  const dep = new Dep();  
  Object.defineProperty(obj, key, {  
    get() {  
      Dep.target && dep.addDep(Dep.target);// Dep.target也就是Watcher实例  
      return val;  
    },  
    set(newVal) {  
      if (newVal === val) return;  
      dep.notify(); // 通知dep执行更新方法  
    },  
  });  
}  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1015973.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【基于优化算法的光伏系统】基于光伏系统(由光伏、电池、转换器、PI 控制器、逆变器和充电控制器组成)的 Simulink 模型

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

BF算法(C++)简单讲解

BF算法匹配过程易理解,若匹配,子串和主串都往下移一位。不匹配时,主串回溯至本次匹配开始下标的下一位。例:图中第三趟匹配时,主串到第七位时与子串不匹配,这次匹配主串是从第三位开始的,所以下…

大数据技术准备

Hbase:HBase 底层原理详解(深度好文,建议收藏) - 腾讯云开发者社区-腾讯云 Hbase架构图 同一个列族如果有多个store,那么这些store在不同的region Hbase写流程(读比写慢) MemStore Flush Hbas…

有名管道实现简易版聊天功能

简单的代码&#xff0c;只能你写一句 我回一句 依次循环 //chat A#include<stdio.h> #include<unistd.h> #include <sys/types.h> #include <sys/stat.h> #include<fcntl.h> #include<string.h> #include<stdlib.h> int main() {//…

SocketTool V4.0 使用说明

TCP/UDP Socket 调 试 工 具 提 供 了 TCP Server,TCP Client,UDP Server,UDP Client,UDP Group 五种 Socket 调试方案。 下面是一份简要的使用流程&#xff1a; TCP 通信测试&#xff1a; 1) 创建 TCP Server 选中左方的 TCP Server, 然后点击 ”创建 ”按钮&#xff0c;软件弹…

临时工说: 云原生数据库别整新名词,bypass ,不就是旁路吗

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到2群&#xff08;共…

有史以来最香的日志收集平台是怎样练成的

作者 观测云 系统开发工程师 李国壮 前言 日志采集&#xff08;logging&#xff09;是观测云 DataKit 重要的一项&#xff0c;它将主动采集或被动接收的日志数据加以处理&#xff0c;最终上传到观测云中心。 日志采集的执行过程可大致分为三段&#xff0c;分别是“定位日志”…

听GPT 讲Istio源代码--pilot

File: istio/operator/pkg/translate/translate.go 在Istio项目中&#xff0c;istio/operator/pkg/translate/translate.go文件的作用是处理Istio Operator的配置信息和Kubernetes的资源对象之间的翻译和转换。 首先&#xff0c;scope和componentToAutoScaleEnabledPath是用于记…

趣谈网络协议_1

趣谈网络协议_1 第1讲 | 为什么要学习网络协议&#xff1f;第4讲 | DHCP与PXE&#xff1a;IP是怎么来的&#xff0c;又是怎么没的&#xff1f;动态主机配置协议&#xff08;DHCP&#xff09; 第5讲 | 从物理层到MAC层&#xff1a;如何在宿舍里自己组网玩联机游戏&#xff1f;第…

WPF 如何让xmal的属性换行显示 格式化

WPF 如何让UI的xmal 按照下面的格式化显示 首先格式化显示在VS中的快捷键是 Ctrl &#xff2b;D 然后需要配置&#xff0c;工具 选项 -文本编辑器 -xmal -格式化-间距 更改成如下就可以了

分布式锁的三种实现方式!

分布式锁是一种用于保证分布式系统中多个进程或线程同步访问共享资源的技术。同时它又是面试中的常见问题&#xff0c;所以我们本文就重点来看分布式锁的具体实现&#xff08;含实现代码&#xff09;。 在分布式系统中&#xff0c;由于各个节点之间的网络通信延迟、故障等原因…

基于java求长方形的周长和面积详细方法

一、方法 要使用Java求长方形的周长和面积&#xff0c;可以通过定义长方形的长度和宽度&#xff0c;然后使用相应的公式进行计算。 首先&#xff0c;定义长方形的长度和宽度&#xff1a; double length 10.0; double width 5.0;然后&#xff0c;使用以下公式计算长方形的周…

RK3588 添加I2C模拟芯片CH423

一.简介 有时候会遇到IO不够用的情况&#xff0c;例如说驱动LED灯&#xff0c;那么有没有什么便宜的&#xff0c;容易买到的芯片&#xff1f;我这次就考虑使用WCH的CH423S&#xff0c;这是一个比较新的IO扩展芯片。 二.硬件原理图 使用gpio来模拟IIC&#xff0c;飞线处理&…

2020-2023中国高等级自动驾驶产业发展趋势研究-概念界定

1.1 概念界定 自动驾驶发展过程中&#xff0c;中国出现了诸多专注于研发L3级以上自动驾驶的公司&#xff0c;其在业界地位也越来越重要。本报告围绕“高等级自动驾驶” 展开&#xff0c;并聚焦于该技术2020-2023年在中国市场的变化趋势进行研究。 1.1.1 什么是自动驾驶 自动驾驶…

发现matplotlib的一个问题

今天在做需求的时候发现一个问题&#xff0c;就是当传一个‘o’时&#xff0c;调用plt.plot画图会自动成为散点图&#xff0c;而不是折线图&#xff0c;代码如下&#xff1a; import pandas as pd import numpy as np import matplotlib.pyplot as plt ds pd.date_range(star…

直播视频处理过程

视频其实就是快速播放一连串连续的图片。 每一张图片&#xff0c;我们称为一帧。只要每秒钟帧的数据足够多&#xff0c;也即播放得足够快。比如每秒 30 帧&#xff0c;以人的眼睛的敏感程度&#xff0c;是看不出这是一张张独立的图片的&#xff0c;这就是我们常说的帧率&#…

JavaScript 中的 `this` 指向问题与其在加密中的应用

JS中的 this 关键字是一个非常重要的概念&#xff0c;它在不同情况下会指向不同的对象或值。在本文中&#xff0c;我们将深入探讨 JavaScript 中 this 的各种情况&#xff0c;并思考如何将其应用于 JS加密中的一些有趣用途。 1. 全局上下文中的 this 在全局上下文中&#xff…

cs224w_colab3_2023 And cs224w_colab4_2023学习笔记

class GNNStack(torch.nn.Module):def __init__(self, input_dim, hidden_dim, output_dim, args, embFalse):super(GNNStack, self).__init__() #这里的继承表示参见 https://blog.csdn.net/wanzew/article/details/106993425 # 继承时运行继承类别的函数 总之 __mro__的目的…

C++ 太卷,转 Java?

最近看到知乎、牛客等论坛上关于 C 很多帖子&#xff0c;比如&#xff1a; 2023年大量劝入C 2023年还建议走C方向吗&#xff1f; 看了一圈&#xff0c;基本上都是说 C 这个领域唯一共同点就是都使用 C 语言&#xff0c;其它几乎没有相关性。 的确是这样&#xff0c;比如量化交…

解决IDEA actiBPM插件之.bpmn文件中文乱码

1、修改IDEA编辑器编码为utf8&#xff0c;File->Settings->Editor->File Encodings&#xff0c;都改为UTF-8 2、在IDEA安装bin目录下&#xff0c;找到 idea.exe.vmoptions 和 idea64.exe.vmoptions 两个文件&#xff0c;打开编辑分别在文本最末端添加下面代码&#xf…