深入解析Vue中的双向数据绑定机制

文章目录

    • 一、双向数据绑定的概念
      • 单向绑定与双向绑定的区别
      • 双向绑定的实例
    • 二、双向绑定的原理
      • MVVM架构
      • ViewModel的工作原理
    • 三、Vue中的双向绑定实现
      • 双向绑定流程
      • 实现双向绑定的关键代码

一、双向数据绑定的概念

单向绑定与双向绑定的区别

单向绑定是将模型(Model)的数据绑定到视图(View)上,当模型数据发生变化时,视图会自动更新。而双向绑定在此基础上增加了视图到模型的反馈机制,即视图状态的变化也能自动反映到模型数据上。

双向绑定的实例

以表单输入为例,当用户在输入框中填写信息时,视图的状态发生变化,如果这种变化能实时更新到模型数据,那么就实现了双向绑定。

二、双向绑定的原理

MVVM架构

双向绑定是MVVM(Model-View-ViewModel)架构的核心特性之一。在MVVM中,ViewModel负责将模型和视图关联起来,实现数据的双向流动。

ViewModel的工作原理

ViewModel包含两个主要部分:

  • 监听器(Observer):负责监听模型数据的变化。
  • 解析器(Compiler):负责解析视图中的指令,并根据指令模板替换数据,同时绑定更新函数。

三、Vue中的双向绑定实现

双向绑定流程

在Vue中,双向绑定的流程包括以下几个步骤:

  1. 初始化Vue实例,对数据进行响应化处理。
  2. 编译模板,找到动态绑定的数据,并初始化视图。
  3. 定义更新函数和Watcher,用于数据变化时更新视图。
  4. 使用Dep管理多个Watcher,确保数据变化时能够通知所有相关的Watcher。

实现双向绑定的关键代码

以下是对Vue双向绑定关键部分的代码实现:

// Vue构造函数
class Vue {constructor(options) {this.$options = options;this.$data = options.data;observe(this.$data);proxy(this);new Compile(options.el, this);}
}
// 数据响应化处理
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]);});}
}
// 编译器
class Compile {constructor(el, vm) {this.$vm = vm;this.$el = document.querySelector(el);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);}
}
// 依赖收集
class Watcher {constructor(vm, key, updater) {this.vm = vm;this.key = key;this.updaterFn = updater;Dep.target = this;vm[key];Dep.target = null;}update() {this.updaterFn.call(this.vm, this.vm[this.key]);}
}
class Dep {constructor() {this.deps = [];}addDep(dep) {this.deps.push(dep);}notify() {this.deps.forEach((dep) => dep.update());}
}
function defineReactive(obj, key, val) {this.observe(val);const dep = new Dep();Object.defineProperty(obj, key, {get() {Dep.target && dep.addDep(Dep.target);return val;},set(newVal) {if (newVal === val) return;dep.notify();},});
}

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

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

相关文章

VR全景摄影的拍摄和编辑软件推荐

随着虚拟现实技术的不断进步,VR全景摄影逐渐成为商业、娱乐和教育等多个领域中的重要工具。通过专业的设备与软件,摄影师能够创作出沉浸式的360度全景作品,为观众提供身临其境的视觉体验。在这篇文章中,我们将介绍VR全景摄影的相关…

C# 两个进程/exe通讯方式 两个应用程序通讯方式

C# 两个exe通讯方式 两个应用程序通讯方式 1. 命名管道(Named Pipes) 1.1. 概述 命名管道是一种用于在同一台机器或网络中不同进程之间进行双向通信的机制。它支持同步和异步通信,适用于需要高效数据传输的场景。 1.2. 特点 双向通信&am…

【vue+printJs】前端打印, 自定义字体大小, 自定义样式, 封装共享样式

效果示例 思维导图 目录 1,基本使用1, 依赖下载2, 页面导入3, 修改字体大小(可行但不推荐) 2, 自定义样式,字体大小1, 修改字体大小(推荐)2, 自定义样式3, 封装共享样式 3, 去除页面页脚内容4, 测试案例demo, 直接cv可用5, print-js的其他参数说明 1,基本使用 1, 依赖下载 …

MyBatis-Plus 之 typeHandler 的使用

一、typeHandler 的使用 1、存储json格式字段 如果字段需要存储为json格式,可以使用JacksonTypeHandler处理器。使用方式非常简单,如下所示: 在domain实体类里面要加上,两个注解 TableName(autoResultMap true) 表示自动…

学习之面试题:偏函数

偏函数(Partial Function)是 Python 中的一个实用工具,通常用于函数式编程中,可以固定一个函数的部分参数,从而生成一个新的函数。偏函数在 Python 中通常通过 functools.partial 实现。在面试中,考察偏函数…

无人驾驶打造“新丝路”,驭势科技在卡塔尔设立研发运营中心

在卡塔尔多哈的街头,除了身穿阿拉伯长袍的人群和悠闲的骆驼队伍之外,又将出现一道全新的风景线,那就是来自驭势科技的无人驾驶车。10月8日,在中关村京港澳青年创新创业中心的协助与对接下,驭势科技在卡塔尔科技园正式成…

<Project-8.1.1 pdf2tx-mm> Python 调用 ChatGPT API 翻译PDF内容 历程心得

原因 用ZhipuAI,测试用的PDF里,有国名西部省穆斯林,翻译结果返回 “系统检测到输入或生成内容可能包含不安全或敏感内容,请您避免输入易产生敏感内容的提 示语,感谢您的配合” 。想过先替换掉省名、民族名等&#xff…

计量校准工作中的误差评定与不确定度

计量校准的目的是确定测量仪器的误差和不确定度,以评估其测量结果的可靠性。误差评定和不确定度计算是计量校准过程中的重要步骤。 误差评定是指通过比较测量仪器的测量结果与已知标准值之间的差异,确定仪器的准确性和精度。误差可以分为系统误差和随机误…

【Java】I/O 操作详解

📃个人主页:island1314 ⛺️ 欢迎关注:👍点赞 👂🏽留言 😍收藏 💞 💞 💞 目录 1. 引言 🚀 2. File 类 📕 2.1 创建 File 对象 …

wpf实现新用户页面引导

第一步 第二部 部分代码: private void show(int xh, FrameworkElement fe, string con, Visibility vis Visibility.Visible) {Point point fe.TransformToAncestor(Window.GetWindow(fe)).Transform(new Point(0, 0));//获取控件坐标点RectangleGeometry rg new Rectangl…

精益与数字化的融合:制造业的创新之路

回望过去,精益管理作为制造业的瑰宝,以其“消除浪费、持续改进、顾客至上”的核心理念,引领了无数企业走向成功。从丰田生产方式到全球范围内的广泛实践,精益管理不仅提升了生产效率,更重塑了企业的文化和价值观。它教…

docker 相关

解释下以下命令: docker run --rm -v ${PWD}:/local -v ${PWD}/generated:/generated openapitools/openapi-generator-cli generate -i /local/openapi.yaml -g csharp -o /generated 这是一个用于在 Docker 容器中运行 OpenAPI Generator CLI 的命令。让我们逐个…

细说Qt的状态机框架及其用法

文章目录 使用场景基本用法状态定义添加转换历史状态QStateMachine是Qt框架中用于构建状态机的一个类,它属于Qt的状态机框架(State Machine Framework)。这个框架提供了一种模型,用于设计响应不同事件(如用户输入、文件I/O或网络活动)的应用程序的行为。通过使用状态机,开发…

音视频好文总结

RTSP play同步 ffplay播放器研究分析 ffplay播放器 暂停、逐帧、音量、快进快退seek功能分析 RTSP RTP RTCP SDP基础知识 flv格式分析与解复用 TS格式详解 m3u8格式详解 FLV格式详解 MP4格式详解 HLS协议详解 RTMP协议详解 HTTP-FLV协议详解 H.264 SPS、PPS详解 H…

3.计算机网络_端口号

端口号的由来 运输层的作用: 在计算机网络中,运输层处在用户功能的最底层、通信部分的最高层的位置,也就是说运输层是用户数据和实际网络通信的桥梁。因此运输层屏蔽了网络的实现部分,以协议的方式向用户层提供了接口&#xff…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《计及状态量平均超限比的综合能源系统动态能量流双层优化》

本专栏栏目提供文章与程序复现思路,具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

【千图网-登录_注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 1. 暴力破解密码,造成用户信息泄露 2. 短信盗刷的安全问题,影响业务及导致用户投诉 3. 带来经济损失,尤其是后付费客户,风险巨大,造…

【Linux进程间通信】Linux信号机制深度解析:保存与处理技巧

📝个人主页🌹:Eternity._ ⏩收录专栏⏪:Linux “ 登神长阶 ” 🌹🌹期待您的关注 🌹🌹 ❀Linux进程间通信 📒1. 信号的保存🌊在内核中的表示🍂sigs…

Python OpenCV精讲系列 - 目标检测与识别深入理解(二十)

💖💖⚡️⚡️专栏:Python OpenCV精讲⚡️⚡️💖💖 本专栏聚焦于Python结合OpenCV库进行计算机视觉开发的专业教程。通过系统化的课程设计,从基础概念入手,逐步深入到图像处理、特征检测、物体识…

【QT】常用控件(一)

个人主页~ 常用控件 一、控件是什么二、QWidget核心属性1、enabled2、geometry3、windowTitle4、windowIcon5、windowOpacity6、cursor7、font8、toolTip9、focusPolicy10、styleSheet 一、控件是什么 ui设计界面左边的这些都叫控件,除了这些以外,QT还允…