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

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

news 2026/3/26 16:54:01

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

终极Windows文件完整性验证指南：为什么专业开发者都选择HashCheck Shell Extension

终极Windows文件完整性验证指南&#xff1a;为什么专业开发者都选择HashCheck Shell Extension 【免费下载链接】HashCheck HashCheck Shell Extension for Windows with added SHA2, SHA3, and multithreading; originally from code.kliu.org 项目地址: https://gitcode.co…...

编程新知 2026/3/26 16:49:16

RWKV7-1.5B-g1a镜像优势解析：离线加载兼容+软链修复+日志分级排查设计

RWKV7-1.5B-g1a镜像优势解析&#xff1a;离线加载兼容软链修复日志分级排查设计 1. 平台简介与核心能力 rwkv7-1.5B-g1a是基于新一代RWKV-7架构的多语言文本生成模型&#xff0c;专为轻量级应用场景优化设计。该镜像经过工程化改造&#xff0c;在保持原模型优秀生成能力的同时…...

编程新知 2026/3/26 14:49:52

3分钟快速上手：DouYinBot抖音无水印视频下载终极指南 [特殊字符]

3分钟快速上手&#xff1a;DouYinBot抖音无水印视频下载终极指南 &#x1f680; 【免费下载链接】DouYinBot 抖音无水印下载 项目地址: https://gitcode.com/gh_mirrors/do/DouYinBot 在短视频内容创作和分享的时代&#xff0c;如何快速获取无水印的抖音视频成为创作者和…...

编程新知 2026/3/26 12:26:33

【AI视频从0到1系统课】导师全程陪跑、课程持续更新、适合零基础！

在 AI 视频工具日益同质化的当下&#xff0c;课程的核心竞争力已从“教你用什么工具”转向“如何帮你拿到结果”。面对“2026 全新升级”与“陪伴式教育”这类宣传语&#xff0c;阅读的关键在于验证其服务颗粒度与学习转化率。 一、 解构“陪伴式教育”&#xff1a;关注反馈机制…...

编程新知 2026/3/26 12:06:05

智能电商客服中台系统实战：高并发场景下的架构设计与性能优化

背景痛点&#xff1a;大促下的客服系统之困 每年双十一、618这类电商大促&#xff0c;对技术团队来说都是一场“大考”。作为直接面对海量用户的客服系统&#xff0c;更是压力山大。我经历过几次大促保障&#xff0c;发现客服系统在峰值流量下&#xff0c;通常会暴露出几个典型…...

编程新知 2026/3/26 11:35:57

ChatTTS流式音频合成实战：从原理到高并发优化

最近在做一个智能客服项目&#xff0c;需要将AI生成的文本实时转换成语音播报给用户。一开始我们用的是传统的TTS服务&#xff0c;文本传过去&#xff0c;等它全部合成完&#xff0c;再把整个音频文件返回。在用户量不大的时候还好&#xff0c;但一到高峰期&#xff0c;问题就全…...

编程新知 2026/3/26 10:57:29

大疆上云API Demo停更了，我们手里的老项目该怎么办？（附迁移思路与安全加固建议）

大疆上云API停更后&#xff1a;老项目的风险评估与迁移实战指南 当官方宣布停止维护某个关键组件时&#xff0c;技术团队面临的不仅是代码层面的挑战&#xff0c;更是对系统全生命周期管理能力的考验。最近大疆上云API Demo的停更公告&#xff0c;让许多依赖该接口的无人机应用…...

编程新知 2026/3/26 10:25:16

个人知识库自动化：OpenClaw+Qwen3-32B镜像实现资料智能归档

个人知识库自动化&#xff1a;OpenClawQwen3-32B镜像实现资料智能归档 1. 为什么需要自动化知识管理 作为一个长期被电子文档淹没的技术写作者&#xff0c;我的Downloads文件夹常年保持着2000文件的混乱状态。某次紧急查找会议纪要时&#xff0c;我花了47分钟才在"未命名…...

编程新知 2026/3/26 9:34:54

计算机毕业设计springboot基于的突发事件信息共享系统 基于Spring Boot的应急事件协同处理平台 利用Spring Boot构建的突发状况信息交互系统

计算机毕业设计springboot基于的突发事件信息共享系统 &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。在当今社会&#xff0c;各类突发事件频发&#xff0c;从自然灾害到公共卫生…...

编程新知 2026/3/26 8:28:31

深度解析开源工具如何实现游戏性能优化：Genshin FPS Unlocker专业实战指南

深度解析开源工具如何实现游戏性能优化&#xff1a;Genshin FPS Unlocker专业实战指南 【免费下载链接】genshin-fps-unlock unlocks the 60 fps cap 项目地址: https://gitcode.com/gh_mirrors/ge/genshin-fps-unlock Genshin FPS Unlocker 是一款专注于游戏性能优化的…...

编程新知 2026/3/26 8:16:30