【Vue】Vue双向绑定原理

【Vue】Vue双向绑定原理

  • 定义:数据变化视图会自动更新,视图变化数据也会更新
  • 原理:通过数据劫持和发布订阅模式实现的
  • 实现

定义:数据变化视图会自动更新,视图变化数据也会更新

  • 比如说,当在输入框输入文字时,vue会检测到数据的变化,然后更新对应的视图。同样,如果你通过代码修改了数据,那么vue也会自动更新视图。

原理:通过数据劫持和发布订阅模式实现的

  • 首先vue通过Object.defineProperty方法对数据进行劫持监听数据的变化,并通过getter和setter方法对数据进行读写,其次vue发布订阅模式,维护了一个订阅者数据,当数据发生变化时,vue会通知所有订阅者进行更新,因此当用户在页面进行更改时,vue会更新数据并通知所有订阅者进行更新视图,同时当数据发生变化时,vue也会更新对应视图。
  • Object.defineProperty(’对象‘,’属性名‘,’属性描述符‘)是JavaScript中的一个方法,用于定义或修改对象的属性。它允许你精确地控制属性的特性(如可写性、可枚举性和可配置性)。
    0bject.defineProperty是对象的方法,只能劫持对象的属性,从而需要对每个对象,每个属性进行遍历,如果属性值是对象,还需要深度遍历,
    0bject.defineProperty监听不到数组的变更的, Vue2.x的方法是重写数组的7个方法push、pop、shift、unshift等等‘
    在这里插入图片描述
    在这里插入图片描述

实现

  • 第一步:需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter;
  • 第二步: compile模板解析指令,把模板中的变量替换成数据,然后初始化渲染视图,同时把每个指令对应的节点绑定上更新函数,添加订阅者,如果数据变化,收到通知,更新视图;
  • 第三步: watcher订阅者是observer和compile之间的通信桥梁,作用:
    • 1.在自身实例化的时候忘订阅器内添加自己
    • 2.自身要有一个update()方法
    • 3.等待属性变动时,调用自身的update方法,触发compile这种的回调
  • 第四步:MVVM作为数据绑定的入口,整合了observer、 compile和watcher三者,通过observer来监听自己的数据变化,通过compile解析模板指令,最后利用watcher把observer和compile联系起来,最终达到数据更新视图更新,视图更新数据更新的效果

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

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

相关文章

SocketWeb实现小小聊天室

SocketWeb实现小小聊天室 消息推送的常见方式轮询长轮询SSE(server-sent event):服务器发送事件WebSocketWebSocket简介WebSocket API 实现小小聊天室实现流程消息格式客户端-->服务端服务端-->客户端 消息推送的常见方式 轮询 浏览器…

图书推荐|Windows Server 2022 Active Directory配置实战

十几年磨一剑,畅销书第10次升级 本书简介 《Windows Server 2022 Active Directory配置实战》是微软技术专家最新推出的Windows Server 2022两卷力作中的Active Directory配置实战篇。 《Windows Server 2022 Active Directory配置实战》延续了作者一贯的写作风格…

MATLAB环境下基于洗牌复杂演化的图像分割算法

智能优化算法因其较强的搜索解能力而得到了大量的应用,在这些计算智能算法中,群体智能优化算法因其高效性、有效性以及健壮性等优点而得到了科研人员的青睐。这类算法借鉴生物群体的合作特性,主要解决大规模复杂的分布式问题,研究…

第7.1章:StarRocks性能调优——查询分析

目录 一、查看查询计划 1.1 概述 1.2 查询计划树 1.3 查看查询计划的命令 1.3 查看查询计划 二、查看查询Profile 2.1 启用 Query Profile 2.2 获取 Query Profile 2.3 Query Profile结构与详细指标 2.3.1 Query Profile的结构 2.3.2 Query Profile的合并策略 2.…

WPF Style样式设置

1.本window设置样式 <Window x:Class"WPF_Study.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expressi…

CentOS删除除了最近5个JAR程序外的所有指定Java程序

帮我写一个shell脚本,ps -eo pid,lstart,cmd --sort=-start_time | grep "pgz-admin"查到的结果,返回的所有进程PID,第六个之上的,全部kill 当然,你可以创建一个简单的Shell脚本来完成这个任务。以下是一个例子: #!/bin/bash# 获取包含 "pgz-admin"…

JSONVUE

1.JSON学习 1.概念: JSON是把JS对象变成字符串. 2.作用: 多用于网络中数据传输. JavaScript对象 let person{name:"张三",age:18}//将JS对象转换为 JSON数据let person2JSON{"name":"张三","age":18}; 3.JS对象与JSON字符串转换…

Python爬虫-付费代理推荐和使用

付费代理的使用 相对免费代理来说&#xff0c;付费代理的稳定性更高。本节将介绍爬虫付费代理的相关使用过程。 1. 付费代理分类 付费代理分为两类&#xff1a; 一类提供接口获取海量代理&#xff0c;按天或者按量收费&#xff0c;如讯代理。 一类搭建了代理隧道&#xff0…

AR应用的开发流程

增强现实&#xff08;Augmented Reality&#xff0c;AR&#xff09;是一种技术&#xff0c;它将虚拟信息叠加在真实世界中&#xff0c;通过计算机生成的视觉、听觉、触觉等感官反馈&#xff0c;将虚拟元素与现实世界进行交互。这种技术使得用户可以与现实世界中的虚拟对象进行互…

Windows系统搭建Elasticsearch引擎结合内网穿透实现远程连接查询数据

文章目录 系统环境1. Windows 安装Elasticsearch2. 本地访问Elasticsearch3. Windows 安装 Cpolar4. 创建Elasticsearch公网访问地址5. 远程访问Elasticsearch6. 设置固定二级子域名 Elasticsearch是一个基于Lucene库的分布式搜索和分析引擎&#xff0c;它提供了一个分布式、多…

社交媒体变革者:剖析Facebook对在线互动的贡献

随着数字化时代的蓬勃发展&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。在这个领域的发展中&#xff0c;Facebook作为先行者和领导者&#xff0c;对在线互动的演变和发展产生了深远的影响。本文将深入剖析Facebook在社交媒体领域的贡献&#xff0c;以及它对在…

Python爬虫-爬取B站番剧封面

本文是本人最近学习Python爬虫所做的小练习。如有侵权&#xff0c;请联系删除。 页面获取url 代码 import requests import os import re# 创建文件夹 path os.getcwd() /images if not os.path.exists(path):os.mkdir(path)# 当前页数 page 1 # 总页数 total_page 2# 自动…

项目打包提示一堆 ts 类型错误问题解决

问题 vue3 ts 项目在打包的过程中报了一大堆 ts 类型错误提示&#xff0c;如下图所示&#xff1a; 报错&#xff1a;Could not find a declaration file for module … implicitly has an ‘any’ type. 解决方法 查看 package.json 文件&#xff0c;可以看到&#xff0c;默…

Python Pandas将 DataFrame 转换为列表

更多Python学习内容&#xff1a;ipengtao.com 在数据分析和处理过程中&#xff0c;经常会使用到 Pandas 库来处理和操作数据。Pandas 提供了灵活强大的数据结构 DataFrame&#xff0c;它可以存储和处理各种类型的数据&#xff0c;并提供了丰富的方法和函数来进行数据操作。有时…

AtCoder ABC342 A-D题解

华为出的比赛&#xff1f; 好像是全站首个题解哎&#xff01; 比赛链接:ABC342 Problem A: 稍微有点含金量的签到题。 #include <bits/stdc.h> using namespace std; int main(){string S;cin>>S;for(int i0;i<s.size();i){if(count(S.begin(),S.end(),S[i…

随机分布模型

目录 前言 一、离散型随机变量 1.1 0-1分布 1.2 二项分布 1.3 帕斯卡分布 1.4 几何分布 1.5 超几何分布 1.6 泊松分布 二、连续型随机变量 2.1 均匀分布 2.2 指数分布 2.3 高斯分布/正态分布 2.4 分布&#xff08;抽样分布&#xff09; 2.5 t分布&#xff08;抽样…

matlab经验模式分解的R波检测算法

1、内容简介 略 56-可以交流、咨询、答疑 2、内容说明 略 心血管疾病是威胁人类生命的主要疾病之一&#xff0c;而心电信号&#xff08;electrocardiogram, ECG&#xff09; 则是评价心脏功能的主要依据&#xff0c;因此&#xff0c;关于心电信号检测处理的研究一直为各方所…

react中修改state中的值无效?

// 初始化state state {personArr:[{name:张三,id:1},{name:李四,id:2},{name:王五,id:3}] }componentDidMount(){const newName 赵六const indexUpdate 1const newArr this.state.personArr.map((item,index)>{if(indexUpdate index){return {...item,name:newName}}e…

Nest.js权限管理系统开发(六)新建模块

本文相关文档&#xff1a;NestJS 中文网 创建模块 nest g命令 我们知道一个模块往往包含controller、module、service等文件&#xff0c;为了方便我们创建这些文件&#xff0c;nest cli提供了一些命令&#xff1a; 生成模块 (nest g mo) 以保持代码井井有条并建立清晰的边界…

适合新手博主站长使用的免费响应式WordPress博客主题JianYue

这款JianYue主题之所以命名为 JianYue&#xff0c;意思就是简单而不简约的。是根据Blogs主题优化而成&#xff0c;剔除了一些不必要的功能及排版&#xff0c;仅保留一种博客布局&#xff0c;让新手站长能够快速手上WordPress。可以说这款主题比较适合新手博主站长使用&#xff…