当前位置： 首页 > news >正文

2023/3/10 Vue核心知识的学习- Vue - v-model双向绑定原理

news 2026/3/26 18:25:12

https://www.jianshu.com/p/2682b5a26869

定义：vue中双向绑定就是指v-model指令，可以绑定一个响应式数据到视图，同时视图中变化能同步改变该值。

在这里插入图片描述
通过Object.defineProperty( )对属性设置一个set函数，当数据改变了就会来触发这个函数，所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了。
在这里插入图片描述
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。

如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。

因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。

接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令（如v-model，v-on）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

因此接下去我们执行以下3个步骤，实现数据的双向绑定：

  1. 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
  2. 实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。
  3. 实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）。

通过以上问题 - 我们引出 Vue监测数据的原理_对象：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-school">学校名称：{{ name }} <br/>学校地址：{{ address }}
</div>
<script type="text/javascript">let vm = new Vue({el: '#v-school',data: {name: '北京大学',address: '北京'}})
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<script type="text/javascript">let data = {name: '尚硅谷',address: '北京',}// 创建一个监视的实例对象，用于监视data中属性的变化const obs = new Observer(data)console.log(obs)// 准备一个vm实例对象let vm = {}vm._data = data = obsfunction Observer(obj) {// 汇总对象中所有的属性const keys = Object.keys(obj)// 遍历keys.forEach((k) => {Object.defineProperty(this, k, {get() {return obj[k]},set(val) {console.log('${k}被改了，我要去解析模板，生成虚拟DOM...我要开始忙了')obj[k] = val}})})}</script>
</body>
</html>

在这里插入图片描述
本次书写的代码为简化版，Vue更完善的点有：

如果要修改_data中的name，完整写法为 vm._data.name = ‘atguigu’ ，还可以直接简写为 vm.name = ‘atguigu’，因为Vue做了数据代理。

当对象中还有对象时，Vue也能做到有为其服务的getter和setter。Vue里面写了递归，有多少层就能写到多少层，直到那个东西不再是对象为止，对象在数组中也是如此。

Vue监测数据的原理，就是靠setter。

只要修改数据，Vue就会重新解析模板，生成虚拟DOM。

https://blog.csdn.net/zs18753479279/article/details/128553178

相关文章：

2023/3/10 Vue核心知识的学习- Vue - v-model双向绑定原理

https://www.jianshu.com/p/2682b5a26869 定义&#xff1a;vue中双向绑定就是指v-model指令&#xff0c;可以绑定一个响应式数据到视图&#xff0c;同时视图中变化能同步改变该值。 通过Object.defineProperty( )对属性设置一个set函数&#xff0c;当数据改变了就会来触发这个…...

编程日记 2023/3/11 9:11:36

面朝大海，春暖花开丨2023年Kaadas凯迪仕全国经销商大会成功召开

3月8日&#xff0c;We——2023年Kaadas凯迪仕全国经销商大会将在中国青岛星光岛会议中心隆重举行&#xff0c;盛会汇聚了超过1000名优秀合作伙伴&#xff0c;规模空前。Kaadas凯迪仕品牌创始人&集团总裁苏志勇先生、集团董事长苏祺云先生以及各高层领导均莅临现场。 大会伊…...

编程日记 2023/3/11 9:10:33

【ubuntu】安装cuda+anaconda的docker环境，并用Vscode远程访问

目录下载英伟达docker配置docker的基本安装环境为vscode安装ssh服务安装anaconda下载英伟达docker docker pull nvidia/cuda配置docker的基本安装环境 apt-get install sudo sudo apt-get update sudo apt-get install wget sudo ps -e|grep ssh为vscode安装ssh服务 sudo ap…...

编程日记 2023/3/11 9:09:26

Python（青铜时代）——容器类的公共方法

内置函数 内置函数&#xff1a;不需要使用 import 导入库&#xff0c;就可以直接使用的函数 函数描述备注len(&#xff09;计算容器中元素个数del( )删除变量max( )返回容器中元素最大值如果是字典&#xff0c;只针对key比较min( )返回容器中元素最小值如果是字典&#xff0c…...

编程日记 2023/3/11 9:08:23

利用canvas给图片添加水印

前言前两天给个人网站添加了一个小功能&#xff0c;就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能&#xff0c;也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实…...

编程日记 2023/3/11 9:07:20

保姆级使用PyTorch训练与评估自己的MobileViT网络教程

文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言 项目地址&#xff1a;https://github.com/Fafa-DL/Awesome-Backbones 操作教程&#xff1a;https://www.bilibili.co…...

编程日记 2023/3/11 9:06:16

Giscus，由 GitHub Discussions驱动的评论系统

在创建网站或博客时&#xff0c;许多人都希望能够为其内容提供评论功能&#xff0c;以与用户进行交流和互动。然而&#xff0c;实现这一点可能会非常复杂&#xff0c;需要处理许多不同的问题&#xff0c;如身份验证、反垃圾邮件、跨站脚本攻击等。为了帮助解决这些问题&#xf…...

编程日记 2023/3/11 9:05:13

【JSON文件解析】JSON文件

文章目录概要&#xff1a;本期主要介绍Qt解析JSON数据格式文件的方式。一、JSON数据格式1.JSON类似于XML&#xff0c;在JSON文件中&#xff0c;有且只有一个根节点2.JSON有两种主流包含型构造字符&#xff1a;{对象}、[数组]3.JSON的值主要包括&#xff1a;对象、数组、数字、字…...

编程日记 2023/3/11 9:04:09

OpenGL超级宝典学习笔记：纹理

前言 本篇在讲什么 本篇章记录对OpenGL中纹理使用的学习 本篇适合什么 适合初学OpenGL的小白 本篇需要什么 对C语法有简单认知 对OpenGL有简单认知 最好是有OpenGL超级宝典蓝宝书 依赖Visual Studio编辑器 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理…...

编程日记 2023/3/11 9:03:06

主辅助服务市场出清模型研究【旋转备用】（Matlab代码实现）

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5;&#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密…...

编程日记 2023/3/11 9:02:01

不用费劲，这5款效率工具为你解决学习工作烦恼

今天我要向大家推荐5款超级好用的效率软件&#xff0c;无论是在学习还是办公中都能够极大地提高效率。这些软件可以帮助你解决许多问题&#xff0c;而且每个都是真正的神器。 1.键盘仿真鼠标——NeatMouse NeatMouse 是一个小型的工具能够使用鼠标光标控制指针。当你的鼠标不…...

编程日记 2023/3/11 9:00:57

PostgreSQL 数据库大小写规则

PostgreSQL 数据库对大小写的处理规则如下&#xff1a; 严格区分大小写默认把所有 SQL 语句都转换成小写再执行加双引号的 SQL 语句除外 如果想要成功执行名称中带有大写字母的对象&#xff0c;则需要把对象名称加上双引号。 验证如下&#xff1a; 想要创建数据库 IZone&…...

编程日记 2023/3/11 8:58:48

【springmvc】执行流程

SpringMVC执行流程 原理图 1、SpringMVC常用组件 DispatcherServlet&#xff1a;前端控制器&#xff0c;不需要工程师开发&#xff0c;由框架提供 作用&#xff1a;统一处理请求和响应&#xff0c;整个流程控制的中心&#xff0c;由它调用其它组件处理用户的请求 HandlerMa…...

编程日记 2023/3/11 8:57:45

什么是AIGC？

目录前言一、什么是AIGC&#xff1f;1、什么是PGC&#xff1f;2、什么是UGC&#xff1f;3、什么是PUCG&#xff1f;4、什么是AIGC&#xff1f;二、总结前言 很明显&#xff0c;ChatGPT的爆火&#xff0c;带动了AIGC&#xff08;AI-Generated Content&#xff09;概念的火热。 …...

编程日记 2023/3/11 8:56:41

【深度强化学习】(2) Double DQN 模型解析，附Pytorch完整代码

大家好&#xff0c;今天和大家分享一个深度强化学习算法 DQN 的改进版 Double DQN&#xff0c;并基于 OpenAI 的 gym 环境库完成一个小游戏&#xff0c;完整代码可以从我的 GitHub 中获得&#xff1a; https://github.com/LiSir-HIT/Reinforcement-Learning/tree/main/Model 1…...

编程日记 2023/3/11 8:55:37

【正则表达式】正则表达式语法规则

正则表达式语法规则1.普通字符 字符描述[ABC]匹配 […] 中的所有字符[^ABC]匹配除了 […] 中字符的所有字符[A-Z][A-Z] 表示一个区间&#xff0c;匹配所有大写字母&#xff0c;[a-z] 表示所有小写字母.匹配除换行符以外的任意字符[\s\S]匹配所有。\s 是匹配所有空白符&#xf…...

编程日记 2023/3/11 8:54:35

1636_isatty函数的功能

全部学习汇总&#xff1a; GreyZhang/g_unix: some basic learning about unix operating system. (github.com) 前面刚刚看完了一个函数和三个文件指针&#xff0c;一行代码懂了半行。但是继续分析我之前看到的代码还是遇到了困难&#xff0c;因为之前自己对于UNIX的一些基础知…...

编程日记 2023/3/11 8:53:32

基于Stackelberg博弈的光伏用户群优化定价模型(Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/3/11 8:52:27

EXCEL职业版本（3）

Excel职业版本&#xff08;3&#xff09; 公式与函数 运算符 算数运算符 关系运算符 地址的引用 相对引用&#xff1a;你变它就变&#xff0c;如影随形 A2&#xff1a;A5 绝对引用&#xff1a;以不变应万变 $A$2 混合引用&#xff1a;识时务者为俊杰&#xff0c;根据时…...

编程日记 2023/3/11 8:51:24

查找Pycharm跑代码下载模型存放位置以及有关模型下载小技巧（model_name_or_path参数）

目录一、前言二、发现问题三、删除这些模型方法一&#xff1a;直接删除注意方法二&#xff1a;代码删除一、前言 当服务器连不上&#xff0c;只能在本地跑代码时需要使用***预训练语言模型进行处理 免不了需要把模型下载到本地 时间一长就会发现C盘容量不够 二、发现问题 正…...

编程日记 2023/3/11 8:49:13

Qwen3.5-4B-Claude-Opus实战案例：用该模型辅助撰写RFC文档与技术决策说明

Qwen3.5-4B-Claude-Opus实战案例&#xff1a;用该模型辅助撰写RFC文档与技术决策说明 1. 模型特性与RFC文档撰写需求 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF作为一款专注于推理分析的AI模型&#xff0c;其结构化思维和分步骤回答能力特别适合技术文档撰写场景…...

编程新知 2026/3/26 17:51:54

ESP32 IDF环境下DHT11温湿度读取避坑指南：从时序图到数据拼接的完整解析

ESP32 IDF环境下DHT11温湿度读取避坑指南&#xff1a;从时序图到数据拼接的完整解析 在物联网设备开发中&#xff0c;温湿度传感器是最基础也最常用的环境感知元件之一。DHT11作为一款低成本、单总线数字输出的温湿度传感器&#xff0c;被广泛应用于各类嵌入式项目中。然而&…...

编程新知 2026/3/26 17:05:20

VLSI设计实战：手把手教你用SPICE模型搭建9种基础电路（附完整代码）

VLSI设计实战&#xff1a;手把手教你用SPICE模型搭建9种基础电路&#xff08;附完整代码&#xff09; 在集成电路设计的浩瀚宇宙中&#xff0c;SPICE模型就像工程师手中的瑞士军刀。我第一次接触SPICE仿真时&#xff0c;面对密密麻麻的网表文件完全不知所措——直到导师扔给我一…...

编程新知 2026/3/26 16:41:15

Oracle RAC实战：5分钟搞懂SCAN IP和VIP的区别与配置技巧

Oracle RAC实战&#xff1a;SCAN IP与VIP的深度解析与高效配置指南 引言 在Oracle RAC&#xff08;Real Application Clusters&#xff09;环境中&#xff0c;高可用性和负载均衡是核心诉求。SCAN IP和VIP作为两大关键技术组件&#xff0c;常常让刚接触RAC的DBA感到困惑。它们虽…...

编程新知 2026/3/26 16:39:14

BilibiliDown：突破B站视频下载限制的革新性工具

BilibiliDown&#xff1a;突破B站视频下载限制的革新性工具 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/bi/Bili…...

编程新知 2026/3/26 16:00:52

hgproxy偶发性无法连接

文章目录环境症状问题原因解决方案环境 系统平台&#xff1a;银河麒麟 &#xff08;鲲鹏&#xff09; 版本&#xff1a;4.5.8 症状 hgproxy 4.0.33.3 出现偶发性无法连接现象&#xff0c;经过几分钟或几十秒或更长时间会自动恢复正常&#xff1b;psql 连接数据库端口正常&am…...

编程新知 2026/3/26 15:48:29

终极Modbus测试工具：OpenModScan让工业通讯调试变得前所未有的简单

终极Modbus测试工具&#xff1a;OpenModScan让工业通讯调试变得前所未有的简单 【免费下载链接】OpenModScan Open ModScan is a Free Modbus Master (Client) Utility 项目地址: https://gitcode.com/gh_mirrors/op/OpenModScan 在工业自动化领域&#xff0c;Modbus协议…...

编程新知 2026/3/26 15:32:12

Windows Insider离线管理完全指南：无账户切换方法与命令行操作技巧

Windows Insider离线管理完全指南&#xff1a;无账户切换方法与命令行操作技巧 【免费下载链接】offlineinsiderenroll 项目地址: https://gitcode.com/gh_mirrors/of/offlineinsiderenroll 在Windows系统管理中&#xff0c;用户常常面临需要在不同更新通道间切换的需求…...

编程新知 2026/3/26 14:05:15

AI 辅助 CAPL 脚本编写实战

专栏&#xff1a;《AI 汽车电子测试实战》第 6 篇 作者&#xff1a;一线汽车电子测试工程师 适合人群&#xff1a;CANoe 测试工程师、想学习 CAPL 的新手、想提升脚本效率的测试人员开篇&#xff1a;CAPL 脚本的痛点 CAPL&#xff08;Communication Access Programming Languag…...

编程新知 2026/3/26 13:32:58

UML（Unified Modeling Language，统一建模语言）是一种标准化的可视化建模语言，广泛用于软件系统的需求分析

UML&#xff08;Unified Modeling Language&#xff0c;统一建模语言&#xff09;是一种标准化的可视化建模语言&#xff0c;广泛用于软件系统的需求分析、设计与文档化。你列出的是UML 2.x 中最常用的六种结构与行为图&#xff0c;分别属于两大类&#xff1a; ✅ 结构图&#…...

编程新知 2026/3/26 13:28:57