vue中双向数据绑定v-model的理解

news/2024/5/30 17:19:10/文章来源:https://blog.csdn.net/laowang357/article/details/136669804

vue采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

Oberver监听数据变化:

需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter,给这个对象的某个值赋值就会触发setter,Observer劫持并监听所有数据

compile解析模板指令:

将模板中的变量替换成数据,初始化渲染页面视图,并将每个指令对应的节点绑定到更新函数,向Dep中添加订阅者,一旦有数据变化,Dep调用dep.notice()通知Watcher,Watcher收到通知了,调用回调函数,更新视图

Watcher:

Watcher是Observer和Compile之间的通信桥梁
1.在自身实例化的时候向Dep中添加订阅者
2.自身必须要有一个update()方法
3.当数据发生变化时,Observer通知Dep,Dep通过dep.notice()通知Watcher,调用自身的update()函数,并触发Compile绑定的回调函数

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

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

相关文章

Web Servlet

目录 1 简介2 创建Servlet项目并成功发布运行3 新加Servlet步骤4 Servlet项目练习5 Servlet运行原理6 操作 HTTP Request头的方法(部分方法示例)7 操作 HTTP Response头的方法(部分方法示例)8 两种重定向(页面跳转)方法9 Cookie9.1 Cookie工作原理9.2 cookie构成9.3 Servlet 操…

企业领导者变革八步法:理论框架与案例分析

在当今竞争激烈的市场环境中,企业领导者面临着前所未有的变革挑战。变革不仅是企业生存和发展的关键,更是领导者展现领导才能的舞台。John Kotter提出的面向转型组织的领导变革八步法,为企业领导者提供了一套全面、系统的变革管理框架。本文将…

安卓多个listView拖动数据交换位置和拖动

注意这里只是给出大概思路&#xff0c;具体可以参考修改自己想要的 public class MainActivity extends AppCompatActivity {private ListView listView1;private ListView listView2;private ArrayAdapter<String> adapter1;private ArrayAdapter<String> adapter…

linux系统下,配置开机自启脚本常见的5种方法

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 所属的专栏:linux基础与进阶,shell脚本编写实战 景天的主页:景天科技苑 文章目录 linux下设置开机自动运行脚本的5种方法一、编辑/etc/rc.d/rc.local文件1、在自己需要启动的文件目录中编写一个…

代码随想录算法训练营第六天| 242.有效字母的异位词、349.两个数组的交集、202快乐数、1.两数之和

系列文章目录 目录 系列文章目录242.有效的字母异位词349. 两个数组的交集①使用HashSet②使用Hash数组 202. 快乐数1. 两数之和①暴力解法&#xff08;时间复杂度不符合要求&#xff09;②使用HashMap法 242.有效的字母异位词 这道题是数组在哈希表中的典型应用。 因为只有2…

Acer宏碁非凡Swift SFG16-71工厂模式原厂Win11系统,预装OEM系统恢复开箱状态

宏基笔记本电脑SFG16-71原装出厂Windows11系统安装工厂包下载&#xff0c;带恢复重置功能 链接&#xff1a;https://pan.baidu.com/s/1JK02kBbwKG_cIBNlEOzrOw?pwdzdfm 提取码&#xff1a;zdfm 原装工厂包系统自带所有驱动、Office办公软件、出厂时自带主题壁纸图片、系统…

伪分布式Spark集群搭建

一、软件环境 软 件 版 本 安 装 包 VMware虚拟机 16 VMware-workstation-full-16.2.2-19200509.exe SSH连接工具 FinalShell Linux OS CentOS7.5 CentOS-7.5-x86_64-DVD-1804.iso JDK 1.8 jdk-8u161-linux-x64.tar.gz Spark 3.2.1 spark-3.2.1-bin-…

STM32/GD32——I2C通信协议

芯片选型 Ciga Device — GD32F470系列 通讯规则 I2C协议&#xff08;或称IIC&#xff09;是由飞利浦&#xff08;现在的恩智浦半导体&#xff09;公司开发的一种通用的总线协议。它使用两根线&#xff08;时钟线和数据线&#xff09;来传输数据&#xff0c;支持多个设备共享…

如何用postman进行http接口测试?

HTTP的接口测试工具有很多&#xff0c;可以进行http请求的方式也有很多&#xff0c;但是可以直接拿来就用&#xff0c;而且功能还支持的不错的&#xff0c;我使用过的来讲&#xff0c;还是postman比较上手。 优点&#xff1a; 1、支持用例管理 2、支持get、post、文件上传、…

python 实现阿里云OSS文件上传

因为我们出口的带宽限制&#xff0c;测试经常找我给他上传个包到阿里云的对象存储&#xff0c;虽然传起来也不是很费事&#xff0c;但是出于运维的职业素养&#xff0c;特意写了一个自动上传的接口&#xff0c;代码如下&#xff1a; # -*- coding: UTF-8 -*- from flask imp…

docker-swarm集群管理命令

为什么选择swarm集群&#xff1f; 灵魂疑问&#xff1a;同样是集群&#xff0c;为什么选择docker swarm&#xff0c;而不不选择k8s或者k3s&#xff1f; 我的需求场景&#xff1a;不想直接用docker或者java -jar直接跑&#xff0c;修改前是使用java -jar方式&#xff0c;这两种…

java019 - Java内部类

1、内部类概述 1.1 内部类访问特点 内部类可以访问外部类的成员&#xff0c;包括私有外部类要访问内部类的成员&#xff0c;必须创建对象 代码&#xff1a; outer类&#xff1a;inner为内部类 2、成员内部类 2.1 成员内部类 代码&#xff1a; 外部类&#xff1a; 测试类中…

Linux系统安装APITable智能表格并结合内网穿透实现公网访问本地服务

文章目录 前言1. 部署APITable2. cpolar的安装和注册3. 配置APITable公网访问地址4. 固定APITable公网地址 前言 vika维格表作为新一代数据生产力平台&#xff0c;是一款面向 API 的智能多维表格。它将复杂的可视化数据库、电子表格、实时在线协同、低代码开发技术四合为一&am…

honle电源维修UV电源控制器维修EVG EPS60

好乐UV电源控制器维修&#xff1b;honle控制器维修&#xff1b;UV电源维修MUC-Steuermodul 2 LΛmpen D-82166 主要维修型号&#xff1a; EVG EPS 60/120、EVG EPS 100、EVG EPS200、EVG EPS 220、EVG EPS 340、EVG EPS40C-HMI、EVG EPS60 HONLE好乐uv电源维修故障包括&#…

【string一些函数用法的补充】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 string类对象的修改操作 我们来看 c_str 返回c格式的字符串的操作&#xff1a; 我们来看 rfind 和 substr 的操作&#xff1a; string类非成员函数 我们来看 r…

第五十五天| 583. 两个字符串的删除操作、72. 编辑距离

Leetcode 583. 两个字符串的删除操作 题目链接&#xff1a;583 两个字符串的删除操作 题干&#xff1a;给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 思考&#xff1a;动态规划。本题中…

WebPack自动吐出脚本

window.c c; window.res ""; window.flag false;c function (r) {if (flag) {window.res window.res "${r.toString()}" ":" (e[r] "") ",";}return window.c(r); }代码改进了一下&#xff0c;可以过滤掉重复的方…

【Java并发知识总结 | 第二篇】乐观锁和悲观锁详讲

文章目录 2.乐观锁和悲观锁详讲2.1悲观锁2.2乐观锁2.3如何实现乐观锁2.3.1版本号机制2.3.2CAS算法2.3.3CAS底层 2.4乐观锁存在的问题2.4.1ABA问题&#xff08;1&#xff09;问题描述&#xff08;2&#xff09;解决 2.4.2循环时间长、开销大2.4.3只能保证一个共享变量的原子操作…

Remove Prefix

题目链接&#xff1a;Problem - B - Codeforces 解题思路&#xff1a; 从最后开始遍历&#xff0c;用map记录每个数出现的次数&#xff0c;再定义一个num记录遍历的次数&#xff0c;要是没超过1&#xff0c;次数加一&#xff0c;超过就结束循环&#xff0c;输出数组长度减去nu…

新 树莓派4B 温湿度监测 基于debian12的树莓派OS

前言 本文旨在完成通过外接温湿度传感器至树莓派使得树莓派不断记录并存储温湿度数据 这个领域有很多文章&#xff0c;但是部分文章已经缺乏了时效性&#xff0c;在最新系统不适用&#xff0c;本文目前适用 硬件 硬件连接 温湿度传感器常选用DHT11和DHT22&#xff0c;淘宝…