Vue中数据双向绑定的原理与流程

目录

引言

一、MVVM 架构

二、数据双向绑定的原理

        1.Observer(观察者)

        2.Dep(依赖收集器)

        3.Watcher(观察者)

三、数据双向绑定的流程

引言

        Vue.js 是一个流行的前端 JavaScript 框架,它以其简洁的 API、轻量级和高效的数据双向绑定机制而广受欢迎。在 Vue 中,数据双向绑定(也称为双向数据绑定)是核心功能之一,它允许视图(View)和模型(Model)之间的双向通信。本文将详细讲解 Vue 中数据双向绑定的原理与流程。

一、MVVM 架构

        Vue 的数据双向绑定主要基于 MVVM(Model-View-ViewModel)架构。MVVM 将传统的 MVC 模式中的 View 层进一步拆分为 View 和 ViewModel。ViewModel 作为连接 Model 和 View 的桥梁,负责监听 Model 的变化并更新 View,同时也负责监听 View 的变化并更新 Model。

二、数据双向绑定的原理

        Vue 的数据双向绑定主要依赖于以下三个核心部分: 

        1.Observer(观察者)

        Vue 使用 Observer 来监听数据对象中属性的变化。当数据对象被创建时,Vue 会遍历其所有属性,并使用 Object.defineProperty() 方法将其转换为 getter/setter,从而实现对数据的“劫持”。当数据发生变化时,setter 会被触发,并通知订阅了该数据的依赖(Dep)进行更新。

        2.Dep(依赖收集器)

        Dep 是 Vue 中实现依赖收集的关键部分。当数据发生变化时,Dep 负责通知所有订阅了该数据的 Watcher 进行更新。在 Vue 中,每个数据属性都有一个与之对应的 Dep 实例,用于收集和管理与该数据相关的 Watcher。

        3.Watcher(观察者)

        Watcher 是 Vue 中实现数据双向绑定的另一个关键部分。它负责监听数据的变化,并在数据发生变化时执行相应的回调函数(通常是组件的重新渲染)。在 Vue 中,每个组件实例都有一个与之对应的 Watcher 实例,用于监听组件中使用的数据属性的变化。

三、数据双向绑定的流程

  1. 初始化阶段
    当 Vue 实例被创建时,Vue 会遍历 data 对象中的所有属性,并使用 Observer 将它们转换为 getter/setter。同时,Vue 会为每个组件实例创建一个 Watcher 实例,用于监听组件中使用的数据属性的变化。

  2. 依赖收集阶段
    当组件的模板被编译成渲染函数时,Vue 会解析模板中的指令和表达式,并生成相应的虚拟 DOM 树。在生成虚拟 DOM 树的过程中,Vue 会遇到需要访问数据属性的地方(如 v-text、v-for 等),这时就会触发 getter,并将当前 Watcher 添加到该数据属性的 Dep 中,实现依赖收集。

  3. 数据变化阶段
    当数据发生变化时(如用户输入、AJAX 请求等),setter 会被触发。setter 会通知 Dep 中的所有 Watcher 进行更新。Watcher 会执行回调函数(通常是组件的重新渲染),从而更新视图。

  4. 视图更新阶段
    在 Watcher 的回调函数中,Vue 会根据新的数据重新生成虚拟 DOM 树,并与旧的虚拟 DOM 树进行比较(Diff 算法)。然后,Vue 会将差异部分应用到真实的 DOM 上,从而完成视图的更新。

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

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

相关文章

【沉淀之华】从0到1实现用户推荐 - 实时特征系统构建,包含特征计算,特征存储,特征查询,特征补偿超详细思路分享

文章目录 背景介绍设计初衷基本概念 技术架构"四高"特征存储特征计算特征查询特征补偿 技术难点Q&A彩蛋 背景介绍 设计初衷 作为用户推荐系统的支撑系统之一:用户实时特征系统有着举足轻重的重要,甚至说它是一起推荐行为触发的必要条件。…

objdump 输出格式解析

objdump 输出格式解析 文章主要翻译自https://www.man7.org/linux/man-pages/man1/objdump.1.html,为提高工作效率翻译借助了AI工具,并进行简单修改 一、objdump 选项 1. -t --syms 打印文件的符号表 另外一种常见的输出格式,通常出现在基…

c#word文档:3.向Word文档中插入表格/4.读取Word文档中表格

--向Word文档中插入表格-- (1)在OfficeOperator项目的WordOperator类中定义向Word文档插入换页的函数NewPage (2)在WordOperator类中定义向Word文档插入表格的函数InsertTable using Microsoft.Office.Interop.Word;// 引入Mic…

Ajax从入门到精通

AJAX无刷新交互 目录(单击跳转对应目录) 1.初步认识AJAX............................................................ 1 1.1AJAX原理和优点...................................................... 1 1.2实际使用..................................…

探索APP内测分发的全过程(APP开发)

什么是APP内测分发探索APP内测分发的全过程? APP内测分发是在应用程序开发过程中探索APP内测分发的全过程,开发者将应用程序的测试版或预发布版分发给特定用户进行测试、反馈和评估的一种方式。这是一个非常重要的环节,可以有效地提高应用的…

【右一的实操记录】全导航,持续更新...

文章目录 📚大数据管理与分析【实验】📚数据结构【实验】📚机器学习【实验】📚大数据安全【实验】📚信息检索【实验】📚爬虫【小实践】📚AIGC📚杂货铺 大部分是和电子笔记对应的实验…

详解SDRAM基本原理以及FPGA实现读写控制

文章目录 一、SDRAM简介二、SDRAM存取结构以及原理2.1 BANK以及存储单元结构2.2 功能框图2.3 SDRAM速度等级以及容量计算 三、SDRAM操作命令3.1 禁止命令: 4b1xxx3.2 空操作命令:4b01113.3 激活命令:4b00113.4 读命令:4b01013.5 写…

mac如何打开exe文件?如何mac运行exe文件 如何在Mac上打开/修复/恢复DMG文件

在macOS系统中,无法直接运行Windows系统中的.exe文件,因为macOS和Windows使用的是不同的操作系统。然而,有时我们仍然需要运行.exe文件,比如某些软件只有Windows版本,或者我们需要在macOS系统中运行Windows程序。 虽然…

如何安全的使用密码登录账号(在不知道密码的情况下)

首先,需要用到的这个工具: 度娘网盘 提取码:qwu2 蓝奏云 提取码:2r1z 1、打开工具,进入账号密码模块,如图 2、看到鼠标移动到密码那一栏有提示,按住Ctrl或者Alt点击或者双击就能复制内容&…

初识Vue-组件化开发(详解各个组件)

目录 一、组件介绍 1.概念 2.特点 3.作用 4.应用 5.分类 二、组件语法 1.定义挂载vue应用 2.注册全局组件 实例 1.自定义组件 2.计数器 3.组件的复用 4.局部组件 实例 5.Prop 6.动态Prop 7.Prop 验证 三、创建组件的关键概念和语法 1. 组件定义 2. 组件选…

mybatis批量保存工具类实用

一、代码 import org.apache.ibatis.session.ExecutorType; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.jdbc.core.JdbcTemp…

正版Office-Word使用时却提示无网络连接请检查你的网络设置 然后重试

这是购买电脑时自带的已经安装好的word。看纸箱外壳有office标记,但是好像没有印系列号。 某天要使用。提示:无网络连接请检查你的网络设置。 经过网上高手的提示: 说要勾选勾选ssl3.0、TLS1.0、1.1、1.2。 我的截图 我电脑进去就缺1.2. …

PCIe总线-MPS MRRS RCB参数介绍(四)

1.概述 PCIe总线的存储器写请求、存储器读完成等TLP中含有数据负载,即Data Payload。Data Payload的长度和MPS(Max Payload Size)、MRRS(Max Read Request Size)和RCB(Read Completion Boundary&#xff0…

PostgreSQL的pg_archivecleanup工具

PostgreSQL的pg_archivecleanup工具 pg_archivecleanup 是 PostgreSQL 中用于管理 WAL(Write-Ahead Logging)归档目录的工具。在使用基于归档的日志复制或持久化存储时,pg_archivecleanup 用来清理那些不再需要的归档日志文件,帮…

vue中的数据共享场景和数据共享方法总结

1、数据共享场景有哪些 页面之间共享数据: 不同页面之间需要共享数据时,可以通过 Vuex 状态管理库或路由参数等方式进行数据传递。例如,在路由参数中传递数据或将数据存储在 Vuex 中,在不同页面间进行数据交换。页面和组件之间共…

C++ 抽象机制

抽象机制 1. 虚函数 使用关键字virtual 声明的函数,意思是可能随后在其派生类中重新定义。 纯虚函数 在声明的末尾使用0 的函数,说明是纯虚函数。 抽象类 含有纯虚函数多的类称为抽象类(abstract class). 多态类型 如果一个类负责为其他一些类提供接…

unity入门——按钮点击了却无法调用函数

查阅了一番都没有解决问题,最后发现问题是由button的Onclick()事件绑定了代码脚本而不是游戏对象导致的。 如果Onclick()事件绑定的是代码脚本,则下拉框里没有函数,但是点击MonoScript后能手动填入函数名(本以为这样就能实现调用…

State.initState() must be a void method without an `async` keyword错误解析

文章目录 报错问题报错的代码 错误原因解决方法解析 另外的方法 报错问题 State.initState() must be a void method without an async keyword如下图: 报错的代码 报错的代码如下: overridevoid initState() async{super.initState();await getConf…

openssl3.2 - exp - 使用默认的函数宏,在release版中也会引入__FILE__

文章目录 openssl3.2 - exp - 使用默认的函数宏,在release版中也会引入__FILE__概述笔记验证是否__FILE__在release版下也能用?将openssl编译成release版的,看看CRYPTO_free()是否只需要一个参数就行?将工程中的openssl相关的库换…

重定义大语言模型的记忆能力:对抗性压缩如何挑战现有测量法

DeepVisionary 每日深度学习前沿科技推送&顶会论文分享,与你一起了解前沿深度学习信息! Rethinking LLM Memorization through the Lens of Adversarial Compression 引言:探索大型语言模型的记忆能力 在当今信息时代,大型…