【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配置实战》延续了作者一贯的写作风格…

高可用k8s集群(k8s-1.29.2)

0、高可用k8s集群(k8s-1.29.2) 文章目录 0、高可用k8s集群(k8s-1.29.2)0、环境准备(centos-7.9、rocky-9.3 环境配置调优)1、nginx keepalived(负载均衡高可用)1.1、nginx1.2、keep…

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…

中国赛车公园行业市场现状分析与投资前景预测研究报告

全版价格&#xff1a;壹捌零零 报告版本&#xff1a;下单后会更新至最新版本 交货时间&#xff1a;1-2天 第一章赛车公园概述 第一节赛车公园概念及特点 一、赛车公园的定义 赛车主题公园就是以赛车为主题&#xff0c;集餐饮住宿、休闲娱乐多种功能于一体的综合性主题公园…

网络安全的主要威胁及应对方法

大家好我是咕噜美乐蒂&#xff0c;很高兴又和大家见面了&#xff01; 网络安全是当今社会中至关重要的议题&#xff0c;面临着各种各样的威胁和挑战。为了更详细地回答您的问题&#xff0c;下面将分析并提供常见的网络安全威胁以及相应的应对方法。 一、恶意软件&#xff08;…

AR应用的开发流程

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

【scala】scala枚举类最佳实现及其jackson序列化方式

参考文章&#xff1a; 官网参考&#xff1a; jackson是支持scala内部的Enumeration的&#xff0c;但是jackson版本需要新一些&#xff0c;比如2.14后。 jackson github jackson-module-scala github enumeratum github scala各个枚举类方式对比&#xff1a; 最好的就是&#…

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;默…

deb文件怎么安装

在Ubuntu中安装.deb文件&#xff0c;你可以使用多种方法&#xff0c;这里介绍两种常见的方法&#xff1a; 方法1&#xff1a;使用dpkg命令 打开终端。 使用cd命令切换到包含.deb文件的目录。 使用dpkg命令安装.deb文件。如果文件名为example.deb&#xff0c;则命令如下&…

企业纷纷投入人员安全建设的主要原因是什么?

随着数字经济、人工智能、区块链、物联网等新技术、新业态、新应用的发展变化&#xff0c;网络犯罪分子的作案手法也在与时俱进不断升级。企业面对复杂多变的网络攻击&#xff0c;必须做好相关防护及人员安全教育。 人为因素或成数据泄露的主要原因 攻击者们大量利用被盗凭据…