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

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

news 2025/10/27 21:58:57

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

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/10/15 15:23:26

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/10/19 17:17:26

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/10/21 0:52:47

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/7/20 15:22:30

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/10/25 19:34:13

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/7/9 12:15:58