vue---基本原理

1、vue的基本原理

        当创建一个vue实例的时候,vue会先遍历data中的属性,用Object.defineProperty(vue3是proxy),将属性转换为getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。同时,每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后,当依赖项的setter被调用的时候,会通知watcher重新计算,从而使它关联的组件得以更新。

2、双向数据绑定的原理

        vue的双向数据绑定采取的是数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各属性的setter和getter,在数据变动时,发布消息给订阅者,触发相应的监听回调。主要有以下几步骤:

  • 对需要observe的数据对象和子属性对象的属性进行递归遍历,加上getter和setter方法,这样,为对象进行赋值的时候,就会触发setter,这时就可以监听到数据的变化。
  • 利用complie解析模板指令,将模板中的变量替换为数据,然后初始化渲染页面,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据变动,收到通知后,即更新视图。
  • watcher订阅者是observer和complie之间通信的桥梁,主要负责:在自身实例化时,往属性订阅器(dep)里面添加自己;自身必须拥有一个update()方法;待属性变动dep.notice()通知时,能调用自身的update()方法,并触发complie中绑定的回调。
  • MVVM作为数据绑定的入口,整合observer、complie和watcher三者,通过observer来监听自己的model数据变化,通过complie来解析编译模板指令,最终利用watcher搭起observer和complie之间的通信桥梁,达到数据变化->视图更新,视图变化->数据变化的双向绑定效果。

3、使用Object.defineProperty()进行数据劫持的缺点

         在对一些属性进行操作时,使用这种方法无法拦截,如通过下标修改数组数据或给对象新增属性,都不能触发组件重新渲染。对于数组而言,大部分操作均无法拦截,只是vue内部通过重写函数的方式解决了该问题。在vue3中,通过采用proxy对对象进行代理,从而实现数据劫持。使用proxy的好处是可以完美的监听到任何方式的数据改变,缺点是兼容问题。

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

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

相关文章

安装不依赖于 Zookeeper 的单节点 Kafka

此篇文章介绍如何使用 Docker 安装不依赖于 Zookeeper 的单节点 Kafka。 使用 Docker 之前应该确保网络能正常访问到镜像仓库。 首先拉取 Kafka 镜像 docker pull apache/kafka:3.7.0运行容器 docker run -p 9092:9092 apache/kafka:3.7.0简单完成上面亮点,基于…

经销or直营,新老车企殊途终要同归

步入2024,汽车圈的新人、老人都逐渐活成了对方的样子。 2024年5月,先后有消息传来,阿维塔要从直营模式全部转向经销模式,蔚来新发布的子品牌“乐道”未来可能考虑合作或加盟,并单独建设门店。 而就在5月1日&#xff…

Qt开发 | Qt控件 | QTabWidget基本用法 | QListWidget应用详解 | QScrollArea应用详解

文章目录 一、QTabWidget基本用法二、QListWidget应用详解1.列表模式1.1 基本操作1.2 添加自定义item1.3 如何添加右键菜单1.4 QListWidget如何删除item 2.图标模式 三、QScrollArea应用详解 一、QTabWidget基本用法 QTabWidget 是 Qt 框架中的一个类,它提供了一个选…

DM达梦数据库数学函数整理

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝&#x1f49…

回调函数的使用详解

实际工作中&#xff0c;经常使用回调函数。用来实现触发等机制&#xff0c;也是基于一些已开发好的底层平台&#xff0c;开发上层应用的常用方法。下面对回调函数做一个详细的解释。 目录 1. 简单的回调函数实例 2. C11&#xff0c;使用function<>的写法 3. 注册函数 …

欧洲杯盛宴与火伞云融合CDN:技术革新与体育盛事的完美融合

随着科技的飞速发展&#xff0c;体育盛事也迎来了前所未有的变革。欧洲杯&#xff0c;作为世界足坛的顶级赛事&#xff0c;吸引了全球数亿球迷的目光。而在这个信息爆炸的时代&#xff0c;如何确保球迷们能够流畅、高清地观看比赛&#xff0c;成为了各大媒体和技术公司面临的重…

DW学习笔记|数学建模task2

本章主要涉及到的知识点有&#xff1a; 微分方程的解法如何用 Python 解微分方程偏微分方程及其求解方法微分方程的基本案例差分方程的求解数值计算方法元胞自动机 2.1 微分方程的理论基础 微分方程是什么&#xff1f;如果你参加过高考&#xff0c;可能在高三备考中遇到过这…

shell脚本和变量

一、shell脚本 脚本就是可以运行的代码的集合&#xff0c;脚本语言&#xff08;计算机语言&#xff09;的特点是&#xff1a;从上到下&#xff0c;按行执行。 LINUX中的shell脚本是运行在shell环境中&#xff08;/bin/bash&#xff09;&#xff0c;bash是shell的解释器。shel…

一文搞懂Linux多线程【下】

目录 &#x1f6a9;多线程代码的健壮性 &#x1f6a9;多线程控制 &#x1f6a9;线程返回值问题 &#x1f6a9;关于Linux线程库 &#x1f6a9;对Linux线程简单的封装 在观看本博客之前&#xff0c;建议大家先看一文搞懂Linux多线程【上】由于上一篇博客篇幅太长&#xff0c;为…

protobuf的了解与使用

1.ProtoBuf&#xff1a; 是一套完整的 IDL&#xff08;接口描述语言&#xff09;&#xff0c;出自Google&#xff0c;基于 C 进行的实现&#xff0c;开发人员可以根据 ProtoBuf 的语言规范生成多种编程语言&#xff08;Golang、Python、Java 等&#xff09;的接口代码 据说 Pr…

Java技术栈中的核心组件:Spring框架的魔力

Java作为一门成熟的编程语言&#xff0c;其生态系统拥有众多强大的组件和框架&#xff0c;其中Spring框架无疑是Java技术栈中最闪耀的明星之一。Spring框架为Java开发者提供了一套全面的编程和配置模型&#xff0c;极大地简化了企业级应用的开发流程。本文将探讨Spring框架的核…

python | pyg2plot,一个有趣的 数据可视化 Python 库!

本文来源公众号“python”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;pyg2plot&#xff0c;一个有趣的 Python 库&#xff01; 大家好&#xff0c;今天为大家分享一个有趣的 Python 库 - pyg2plot。 Github地址&#xff1a;h…

打破数据分析壁垒:SPSS复习必备(八)

一、假设检验-基本概念 对总体提出一假设&#xff0c;然后借助样本对该假设进行检验。 原假设 H0: 在统计学中,把需要通过样本去推断正确与否的命题,称为原假设,又称零假设.它常常是根据已有资料或经过周密考虑后确定的. 备择假设H1: 与原假设对立的假设. 显著性水平(signi…

兰州市红古区市场监管管理局调研食家巷品牌,关注细节,推动进步

近日&#xff0c;兰州市红古区市场监管管理局临平凉西北绿源电子商务有限公司进行了深入视察&#xff0c;为企业发展带来了关怀与指导。 食家巷品牌作为平凉地区特色美食的代表之一&#xff0c;一直以来凭借其纯手工工艺和独特的风味&#xff0c;在市场上占据了一席之地。领导…

Linux常用环境变量PATH

Linux常用环境变量 一、常用的默认的shell环境变量二、环境变量 PATH三、持久化修改环境变量四、常用的环境变量 一、常用的默认的shell环境变量 1、当我们在shell命令行属于一个命令&#xff0c;shell解释器去解释这个命令的时候&#xff0c;需要先找到这个命令. 找到命令有两…

统信UOS上鼠标右键菜单中添加自定义内容

原文链接&#xff1a;统信UOS上鼠标右键菜单中添加自定义内容 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于在统信UOS桌面操作系统上鼠标右键菜单中添加自定义内容的文章。通过自定义鼠标右键菜单&#xff0c;可以大大提升日常操作的效率和便捷性。本文将详细…

面向对象修炼手册(四)(多态与空间分配)(Java宝典)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;面向对象修炼手册 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 前言 1 多态 1.1 多态的形式&…

节省一个小目标,电手官方一键「傻瓜式」重装系统

大伙儿下午好&#xff0c;这是一篇负收益的广子。 没错&#xff0c;电手上线了重装 Windows 系统的工具类软件。 和我们顶头老大傲梅分区助手一样&#xff0c;不含捆绑&#xff0c;上手简单&#xff0c;完全免费&#xff0c;用爱发电。 众所周知&#xff0c;微软对于系统的更…

韩顺平0基础学java——第30天

p600-611 坦克大战&#xff01; 艰难推进中 坦克大战-子弹 发射子弹 1.当发射一颗子弹后&#xff0c;就相当于启动一个线程 2.玩家拥有子弹对象&#xff0c;当按下J时&#xff0c;就启动发射行为&#xff08;线程&#xff09;&#xff0c;让子弹不停移动&#xff0c;形成…

最新!计算机类SCI期刊全名单!你想发的顶刊都在这里

【SciencePub学术】近日&#xff0c;2023JCR正式发布&#xff0c;最受瞩目就是各类期刊的最新影响因子排名&#xff0c;本期&#xff0c;小编对计算机类的期刊做了一个整理&#xff0c;供计算机方向的研究学者们参考&#xff01; 来源&#xff1a;WOS数据库官网 完整名单 ※ 本…